Alert
An inline callout that states the status of the thing on the page, in one of four severities.
import from ~/components/ui/alert
Variants
Heads up
The demo environment refreshes every 24 hours. Unsaved changes are cleared.
variant="info"
Neutral context, tips, non-blocking information.
Changes saved
Your project settings were updated and are now live.
variant="success"
Confirmation that an action completed.
Trial ending soon
Your trial expires in 3 days. Add a payment method to keep access.
variant="warning"
Attention needed but nothing has failed: a degraded or expiring state.
Payment failed
We couldn't process your card. Update your billing details to retry.
variant="error"
A failure the user has to act on.
Title only
All systems operational
no description
The description is optional. A single line reads as a compact status banner.
Without an icon
Scheduled maintenance
The dashboard is read-only on Sunday between 02:00 and 04:00 UTC.
text only
Legal here, but the icon carries the severity for anyone who does not read color. Prefer the icon.
Rules
Do
Lead with an icon that matches the variant intent: color alone is not a signal.
The component already carries role="alert" — do not add another.
Keep AlertTitle to one line and put the detail in AlertDescription.
Pick the variant by severity: error is action-required, warning is attention.
Don't
Do not stack several error alerts — consolidate them into one with a list.
Do not use the error variant for a warning; red is reserved for failures.
Do not pass color or border classes — the variant owns the whole surface.
Do not use an alert for a transient confirmation; that is a toast.