Alert
Alert is used for important, time-sensitive, or critical messages.
All Variants
<Alert variant="info" title="Info">Informational message</Alert>
<Alert variant="success" title="Success">Operation completed</Alert>
<Alert variant="warning" title="Warning">Action may be required</Alert>
<Alert variant="danger" title="Danger">Critical issue detected</Alert>
<Alert variant="neutral" title="Neutral">General notice</Alert>
ℹ️
Info
Informational message
✅
Success
Operation completed
⚠️
Warning
Action may be required
⛔
Danger
Critical issue detected
ℹ️
Neutral
General notice
Dismissible + With Actions
<Alert
variant="warning"
title="Scheduled Maintenance"
dismissible
>
Maintenance will occur tonight.
</Alert>
⚠️
Scheduled Maintenance
Maintenance will occur tonight.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | string | info | Semantic style |
title | string | — | Headline |
dismissible | boolean | false | Shows close button |
onClose | function | — | Called on dismiss |
Related Components
- Callout — Less urgent notes
- Banner — Page-level messaging