Alert
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Schema preview ready
Review proposed entity types before we commit them to your graph.
All Tones#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | Bold title text. |
| description | ReactNode | — | Body description. |
| icon | ReactNode | — | Icon override; defaults to a glyph matched to the tone. |
| action | ReactNode | — | Optional trailing actions (rendered to the right of the description). |
| live | enum | polite | Aria-live behavior for the alert. Default `'polite'`. Alerts that are part of the initial page render should leave this at the default — `role="alert"` (which is `aria-live="assertive"`) interrupts the screen reader on every page load. Set `'assertive'` only for urgent alerts that appear *after* initial render. Set `'off'` to suppress announcements entirely (still rendered, still has `role="status"`). |
| tone | "ok" | "warn" | "err" | "accent" | null | undefined | accent |