display contract
Alert
Inline non-dismissible notice tied to a section. For warnings/errors that aren't toasts.
Variants
- info
- semantic.info tint
- success
- semantic.success
- warning
- semantic.warning
- destructive
- semantic.destructive
Sizes
- md
- lg
Slots
- icon
- Auto-picked from variant unless overridden
- title
- Single-line headline
- description
- Optional body text
- action
- Optional Link or Button on the right
Example
<Alert variant="warning"><AlertTitle>Action required</AlertTitle><AlertDescription>Update your payment method.</AlertDescription></Alert>Usage rule
role="alert" + aria-live="polite" (or "assertive" for destructive).
The full Alert contract has 3 more rules, plus the do-not patterns. Get the full recipe.