# Note

> Small annotated text under a block: explains a rule, a caveat or an empty state.

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

Small annotated text under a block: explains a rule, a caveat or an empty state. Flush to its
container's inline edges; tone only changes the text color, so it never carries meaning alone.

## Import

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

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

## Usage

```tsx
<Note>
  Grades are published when the term closes.
</Note>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `tone` | `"neutral" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Colors the text. Defaults to `neutral`. |
| `divider` | `boolean` | `false` | Hairline above the note, to hang it under a block it explains. |

`*` 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-note--default)
- [Tones](/storybook/?path=/story/containers-note--tones)
- [With Divider](/storybook/?path=/story/containers-note--with-divider)

## Source

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