Banner
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Accent#
New: incident pinning in the graph.
Warn#
You're on the trial plan — 4 days remaining.
Stack#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | ReactNode | — | Override the leading glyph. |
| action | ReactNode | — | Optional trailing action (e.g., a link). Rendered with `ml-auto`. |
| live | enum | polite | Aria-live behavior for the banner. Default `'polite'`. Banners 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 banners that appear *after* initial render. Set `'off'` to suppress announcements entirely (still rendered, still has `role="status"`). |
| sticky | boolean | null | undefined | — | |
| tone | "ok" | "warn" | "err" | "accent" | null | undefined | accent |