Feedback
Alert
A message about the page, in place.
When to reach for it
Examples
tones
Read-only mode
Deployed
Token expires in 6 days
Upload failed
Notes
A message about the page, in place.
Carries role="alert" for the danger tone and role="status" for the rest, which is the difference between interrupting the reader and waiting for a pause. Getting that backwards is the usual accessibility failure here: a "saved" toast that talks over someone mid-sentence, or a payment error that is never announced at all.
The tone is the message's SEVERITY, not its decoration. Colour is doubled by an icon and by the words, so the meaning survives both monochrome printing and colour-blindness.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| action | ReactNode | Optional action — a retry, a link to the settings that fix this. | |
| children | ReactNode | — | |
| hideIcon | boolean | false | Hides the leading icon for a dense inline notice. |
| title | ReactNode | — | |
| tone | AlertTone | 'info' | — |
Also accepts everything in Omit<HTMLAttributes<HTMLDivElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
Types
export type AlertTone = 'info' | 'success' | 'warning' | 'danger'Accessibility
- danger is role="alert" and interrupts; the other three are role="status" and wait for a pause.
- Colour is doubled by an icon and by the words.