Search for a command to run...
A modal that **forces** an explicit choice — no outside-click dismiss, no Esc escape by default. Reserve for destructive / irreversible actions ("Delete this workspace?"); for any other modal task, reach for `Dialog`.
AlertDialogAction defaults to Button variant="solid"; pass variant="destructive" for delete-style confirms. AlertDialogCancel defaults to variant="outline". Both render as Buttons under the hood, so they accept the full Button prop surface.
AlertDialogState container. Forwards every Radix AlertDialog.Root prop.
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Uncontrolled initial state. |
onOpenChange | (open: boolean) => void | — | Fires when the dialog opens or closes. |
AlertDialogContentThe centered confirm card. Same bg-surface-primary + shadow.max chrome as Dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" | "sm" | "default" | default = max-w-md on desktop with left-aligned header. sm stays max-w-xs with centered header and a 50/50 button grid — denser confirm pattern. |
className | string | — | Override widths / spacing for the rare bespoke confirm. |
AlertDialogHeader / AlertDialogTitle / AlertDialogDescriptionTypography slots. AlertDialogTitle is required for screen-reader announcement.
AlertDialogTitle — text-lg font-medium text-fg-high.AlertDialogDescription — text-sm text-fg-mid.AlertDialogMediaOptional size-16 rounded-full bg-sand-9/10 icon tile above the title. Drop a status icon inside (e.g. <TrashIcon className="text-fg-error" />) for destructive confirms — the chip carries the meaning before the user reads the text.
AlertDialogFooterLayout slot. Mobile: stacked with primary on top (via flex-col-reverse). Desktop default: right-aligned row. sm size: 50/50 two-column grid (Cancel left, Action right).
AlertDialogAction / AlertDialogCancelPre-styled Button wrappers that bind to Radix's Action / Cancel semantics. Pass any Button variant / size to override defaults.
| Component | Default variant | Notes |
|---|---|---|
AlertDialogAction | "solid" | The primary confirm. Pass variant="destructive" whenever the action is irreversible. |
AlertDialogCancel | "outline" | The escape hatch. Stays outlined so it never visually competes with the action. |
Use AlertDialog only when the action is irreversible or destructive — delete, leave,
revoke. For ordinary modals (edit a profile, pick a file), Dialog is the right tool.
Pair AlertDialogAction variant="destructive" with AlertDialogMedia containing a red status
icon. The red tint + red icon are the two visual tells separating a careful click from regret.
Phrase the title as the question ("Delete this workspace?"). Phrase the action button as the verb ("Delete workspace") — the user re-reads the verb at click time.
Stack two destructive actions side-by-side. Show one primary action and one cancel — anything else dilutes the confirm.
Use AlertDialog for celebrating a non-action ("Saved!"). Toasts (toast.success) or a
Dialog with a single confirm read more correctly.