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" | "default" | default = neutral bordered banner; destructive = red-tinted error pill. |
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" so the error reads at a glance — solid status
icons (CircleExclamationSolidIcon, TriangleExclamationSolidIcon) work best.
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.