synthetic
Alert
An inline message with a status.
Project alertsInfo, success, warning, error
Harbour launch moved
Now Friday 24 Oct, 09:00.
Rota exported
14 shifts sent to Leo Santos.
Two tasks are due today
Offline sync for tasks and Harbour homepage.
Export failed
The depot list has no postcodes.
Saved
Sync paused
Tasks on this phone are not backed up.
Could not reach the crew calendar for the northern depots
Check the connection and try again in a few minutes.
In context
Rota exportA warning above the actions it changes
Rota export
Leo Santos has two clashes
Tue 22 Oct, 07:00 and 15:00.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
type | "info" | "success" | "warning" | "error" | undefined | No | info |
title | ReactNode | No | — |
icon | ReactNode | No | — |
onClose | (() => void) | undefined | No | — |
bionic | boolean | undefined | No | — |
bionicOptions | BionicOptions | undefined | No | — |
Accessibility
error and warning render role="alert" (announced at once); info and success render role="status" (announced politely). The tone is never the only signal: say it in the title.
data-rebar-* attributes
data-rebar-component="alert" with data-rebar-type set to the current type; data-rebar-part="title", "description".
Migrating to Ant Design
AntD's Alert takes the same type values with a message/description split (here title/children): a close, low-risk rename.