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

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

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

Usage

<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
• Tones
• With Divider

Source

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