Alert Dialog
shadcn/ui
Interrupts the user with a mandatory choice. No way to dismiss without clicking Cancel or the action button.
@/components/ui/alert-dialogDefault — confirm action
Default: AlertDialogAction uses bg-primary — for reversible or safe confirmations
Destructive — irreversible action
Destructive: override action with className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
In context — bulk delete
Include the count and IDs in the description so the user can verify before confirming
AlertDialog vs Dialog
| AlertDialog | Dialog | |
|---|---|---|
| Close on backdrop | No — user must choose an action | Yes — click outside closes |
| Escape key | Blocked — no escape | Yes — closes dialog |
| X button | No | Yes |
| Best for | Delete, logout, data loss, bulk actions | Forms, detail views, settings |
Sub-components
| Component | Role |
|---|---|
| AlertDialog | Root — manages open/closed state |
| AlertDialogTrigger | Opens the dialog — use asChild with your own Button |
| AlertDialogContent | Modal panel — centered, no outside-click or Escape to dismiss |
| AlertDialogHeader | Container for title + description |
| AlertDialogTitle | Bold heading — what will happen |
| AlertDialogDescription | Consequences and details |
| AlertDialogFooter | Container for Cancel + Action buttons |
| AlertDialogCancel | Dismiss without action — renders as outline Button |
| AlertDialogAction | Confirm the action — bg-primary by default; override for destructive |
On this page