Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
When To Use
Use alert dialogs to interrupt the user flow with a message that requires their attention and acknowledgment. They're useful for:
- Confirming destructive actions (like deleting data)
- Requiring explicit user confirmation
- Warning users about consequences of an action
- Presenting critical information that needs acknowledgment
- Requiring a choice before proceeding
Unlike regular dialogs, alert dialogs are more disruptive and should be used sparingly for truly important interactions.
Examples
Props
AlertDialogRoot
| Prop | Type | Default |
|---|---|---|
onOpenChange? | ((open: boolean) => void) | - |
defaultOpen? | boolean | - |
open? | boolean | - |
AlertDialogTrigger
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
value? | string | number | readonly string[] | - |
type? | "button" | "submit" | "reset" | - |
name? | string | - |
formTarget? | string | - |
formNoValidate? | boolean | - |
formMethod? | string | - |
formEncType? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
disabled? | boolean | - |
key? | Key | null | - |
form? | string | - |
AlertDialogContent
| Prop | Type | Default |
|---|---|---|
forceMount? | true | - |
onCloseAutoFocus? | ((event: Event) => void) | - |
onOpenAutoFocus? | ((event: Event) => void) | - |
onFocusOutside? | ((event: FocusOutsideEvent) => void) | - |
onEscapeKeyDown? | ((event: KeyboardEvent) => void) | - |
asChild? | boolean | - |
key? | Key | null | - |
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
AlertDialogDescription
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
AlertDialogAction
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
value? | string | number | readonly string[] | - |
type? | "button" | "submit" | "reset" | - |
name? | string | - |
formTarget? | string | - |
formNoValidate? | boolean | - |
formMethod? | string | - |
formEncType? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
disabled? | boolean | - |
key? | Key | null | - |
form? | string | - |
AlertDialogCancel
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
value? | string | number | readonly string[] | - |
type? | "button" | "submit" | "reset" | - |
name? | string | - |
formTarget? | string | - |
formNoValidate? | boolean | - |
formMethod? | string | - |
formEncType? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
disabled? | boolean | - |
key? | Key | null | - |
form? | string | - |