Components / Feedback
Alert
stableAn inline, page- or section-level message — stays on the page until dismissed or the condition changes, unlike a Toast.
Variants
Payment received
Invoice #4821 is now marked paid.
Trial ends in 3 days
Add a payment method to avoid interruption.
Sync failed
Retry, or check your connection settings.
New feature available
Bulk export is now live in Settings.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'success' | 'warning' | 'error' | 'info' | 'info' | No | Colour and icon. |
title | string | — | Yes | Short summary line. |
children | ReactNode | — | No | Optional supporting detail. |
Do
- Use the variant that matches severity, not the one that "looks nicest" for the layout.
- Keep the title a short summary; put detail and next steps in the body.
Don't
- Use an Alert for a transient confirmation ("Saved!") — that’s a Toast.
- Stack more than one Alert in the same view unless each is about a genuinely different thing.