Component · 08
Alert
An inline message set like a margin note: a thick coloured rule on the left, and words that say what happened.
Variants
Heads up
Your trial ends in 3 days.
Saved
Your changes are live.
Almost full
You have used 92% of your storage.
Payment failed
Your card was declined. Update it to keep your plan.
<Alert>
<AlertTitle>Heads up</AlertTitle>
<AlertDescription>Your trial ends in 3 days.</AlertDescription>
</Alert>
<Alert variant="success">…</Alert>
<Alert variant="warning">…</Alert>
<Alert variant="danger">…</Alert>Title only
Copied to clipboard
<Alert variant="success">
<AlertTitle>Copied to clipboard</AlertTitle>
</Alert>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "success" | "warning" | "danger" | "info" | The coloured rule. The title and text must carry the meaning, not the colour. |
| role | string | "status" | "alert" | Danger defaults to alert (assertive), the rest to status (polite). Override for static notices. |
Live-region roles announce only when the alert is inserted or changed after the page has loaded. An alert that is already on the page at load is read in order like any text.