Note
ProA visually distinct callout block for supplementary information, tips, warnings, or important notices within documentation or long-form content. Notes use a left border accent and background tint to stand apart from body text. They are not dismissible and remain part of the content flow. Suitable for documentation pages, onboarding guides, and help articles.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | ||
| Tip | ||
| Warning | Amber-accented note for important caveats or prerequisites. | Use to highlight prerequisites or potential pitfalls — "This action cannot be undone". |
| Important |
Usage Guidelines
Use within long-form content to highlight important supplementary information.
Use notes for form validation or transient feedback — use Alert or Inline Message.
Keep the note content concise — one to three sentences maximum.
Nest notes within other notes.
Include a label prefix that matches the severity — "Note:", "Warning:", "Tip:".
Overuse notes on a single page — they lose impact when there are too many.
Code
Design Tokens
Accessibility
- Uses role="note" to semantically identify the element as supplementary content.
- Icon has aria-hidden="true" — the label prefix and text convey meaning.
- Note content is read in normal document flow by screen readers.
- Do not use role="alert" — notes are static content, not dynamic announcements.