Alert Dialog
A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, AlertDialog requires user interaction and cannot be dismissed by clicking outside.
Basic Usage
Basic Alert Dialog
A confirmation dialog with cancel and action buttons.
Confirmation Dialog
Confirmation Dialog
A non-destructive confirmation dialog.
Custom Button Variants
Button Variants
Customize the action and cancel button variants.
API Reference
AlertDialogAction
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "destructive" | "primary" | Button variant style |
class | string | - | Additional CSS classes |
AlertDialogCancel
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "destructive" | "secondary" | Button variant style |
class | string | - | Additional CSS classes |
AlertDialog
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Controlled open state |
onOpenChange | (open: boolean) => void | - | Callback when open state changes |
Accessibility
- • AlertDialog traps focus inside the dialog when open.
- • Cannot be dismissed by clicking outside or pressing Escape (requires explicit user action).
- • Use for destructive or important actions that require confirmation.