Alert
stableserver-safe
An in-page message about what the user is looking at. Carries a glyph as well as a colour, so the tone survives greyscale.
Tones
Critical is announced assertively and interrupts; the quieter tones wait their turn.
Scheduled maintenance
Charts will be unavailable on Sunday between 02:00 and 04:00 UTC.
Board published
Three pins have gone stale
Pins untouched for 60 days stop counting toward Beat.
Couldn't reach the metadata service
Your pin was saved without a title or image. Retry to fill them in.
<Alert tone="critical" title="Couldn't reach the metadata service"
action={<Button size="sm">Retry</Button>}>
Your pin was saved without a title or image.
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "critical" | "info" | Severity. Critical gets role=alert; everything else gets role=status. |
| title | ReactNode | — | Short headline, set in semibold. |
| action | ReactNode | — | Usually a Button, placed at the row's end. |
Guidance
Do
- Say what happened and what to do about it. 'Retry' is a better alert than 'An error occurred'.
- Put the alert next to the thing it describes.
Don't
- Don't stack more than two alerts — past that nobody reads any of them.
- Don't apologise. State the problem and the fix.
Accessibility
Critical gets role=alert, which interrupts a screen reader immediately.
The others get role=status, announced at the next natural pause.
Each tone has a distinct glyph, so the meaning doesn't depend on colour vision.