Search for a command to run...
A persistent inline message. Bordered banner with title + description; supports a leading icon and a trailing action slot. Use for status updates and callouts inside the page flow — not for transient confirmations (`Toast`) or destructive confirms (`AlertDialog`).
Drop a leading SVG icon as the first child for status emphasis — the grid layout reserves an icon column automatically. AlertAction sits in the top-right corner for an inline button or dismiss control.
Alert| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "warning" | "default" | default = neutral bordered banner; destructive = error tint; warning = amber tint + readable text-fg-warning. |
AlertTitle / AlertDescription / AlertActionTypography + layout slots.
AlertTitle — font-medium. Hops to column 2 when a leading icon is present.AlertDescription — text-sm text-fg-mid. Supports paragraph spacing for multi-line messages.AlertAction — pins to the top-right corner. Use for an inline button or dismiss control.Pair a leading icon with variant="destructive" or variant="warning" so status reads at a
glance — solid status icons (CircleExclamationSolidIcon, TriangleExclamationSolidIcon)
work best. Use text-fg-warning on bg-warning/10 (via the warning variant), never solid
amber text on an amber surface.
Use AlertAction for a single inline next-step (Try again, Dismiss). For more than one
action, drop the slot and put a row of buttons below the description.
Use Alert for transient feedback ("Saved!"). That's Toast's job — Alert stays on the page
until the underlying state changes.
Use Alert for destructive confirms ("Delete this folder?"). AlertDialog traps focus and
forces a deliberate choice.