Note
contentCallout box in violet (default) or coral variant, with an optional bold title. Used for tips, warnings, and breaking-change notices.
Preview
Design principle: Components apply brand-css classes and add only interactivity, typing, and accessibility. The visual styles live entirely in CSS.
Breaking change: The
ReadingToolbar now requires an explicit sections prop instead of a hardcoded list.Usage
import { Note } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';
<Note title="Tip:">
Use tokens for consistent styling.
</Note>
<Note variant="coral" title="Warning:">
This is a breaking change.
</Note>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'violet' | 'coral' | 'violet' | Accent color |
title | string | -- | Bold title at the start |
children | JSX.Element | -- | Note content |
class | string | -- | Additional CSS classes |
role | string | 'status' | ARIA role |
Accessibility
- Role: Defaults to
role="status"; override withrole="alert"for urgent notices. - Color: Border-left color + bold title carry meaning, not color alone. Text is always readable on the surface background.
- Contrast: Uses
--mutedon--surface(AA compliant).
Do / Don't
Do
Use violet for informational tips. Use coral for warnings and breaking changes.
Don't
Don't use notes for primary content. They should supplement, not replace, the main text.