# Comment

> Annotation callout on a document: bold author, optional counter, body.

Source: https://ui.jcsoftdev.com/docs/components/comment

Annotation callout on a document: bold author, optional counter, body.

## Import

```ts
import { Comment } from "@jcsoftdev/ui/containers";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/containers/comment`.

## Usage

```tsx
<Comment
  tone="pending"
  author="Camila Rojas"
  label="Nota de Camila Rojas"
>
  El cliente pidió degradado alto y no usar navaja en la nuca.
</Comment>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"pending" \| "reply"` | `"pending"` |  |
| `author` * | `string` |  | Name of the commenter. |
| `label` * | `string` |  | Accessible name of the note (`role=note` takes no name from content). |
| `number` | `number` |  | Optional counter shown before the author. |
| `children` | `ReactNode` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/containers-comment--default)
- [Reply](/storybook/?path=/story/containers-comment--reply)
- [Numbered](/storybook/?path=/story/containers-comment--numbered)

## Source

`packages/ui/src/containers/comment/comment.tsx`