Alert Composition
An inline message about the thing a person is looking at. For something that happened somewhere else, or that should not push the layout around, use a Toast.
Usage
Scheduled maintenance
The dashboard will be read-only on Sunday from 02:00 to 04:00 WIB.
Invoice sent
Card expires this month
Update it before the next billing run to avoid an interruption.
Payment failed
The bank declined the charge. Nothing has been billed.
<Alert tone="danger" title="Payment failed" actions={<Button size="sm" tone="danger">Retry</Button>}> The bank declined the charge. Nothing has been billed.</Alert>What it announces
danger and warning render as role="alert" with aria-live="assertive"; the quieter tones are
role="status" and polite. That distinction is deliberate — a success note that interrupts a screen
reader mid-sentence is not help, it is noise.
Do
Say what happened and what to do next: 'The bank declined the charge. Nothing has been billed.'
Don't
Use tone='danger' for emphasis on a message that is not an error — assistive technology takes it literally.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| tone | Tone | 'info' | Also decides the default icon and whether it interrupts. |
| title | ReactNode | — | One line. The body carries the detail. |
| icon | ReactNode | null | — | Overrides the tone icon; null removes it. |
| actions | ReactNode | — | Buttons under the text. Keep to two. |
| onDismiss | () => void | — | Adds a labelled close button. |