The AlertDialog component is a modal dialog that interrupts the user with important content and expects a response. It's perfect for confirmations, warnings, and critical actions that require user attention.
Basic Usage
Delete Confirmation
Warning Dialog
Success Confirmation
Custom Content
Properties
AlertDialog
| Property | Type | Description |
|---|
defaultOpen | boolean | The open state of the dialog when it is initially rendered. |
open | boolean | The controlled open state of the dialog. |
onOpenChange | (open: boolean) => void | Event handler called when the open state changes. |
AlertDialogTrigger
| Property | Type | Description |
|---|
asChild | boolean | Change the default rendered element for the one passed as a child. |
AlertDialogContent
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
forceMount | boolean | Used to force mounting when more control is needed. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
AlertDialogTitle
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
AlertDialogDescription
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
AlertDialogAction
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
AlertDialogCancel
| Property | Type | Description |
|---|
className | string | Additional CSS classes for styling. |
Customization
You can customize the appearance of the AlertDialog using CSS classes or Tailwind CSS.
The AlertDialog component is built on top of Radix UI's Alert Dialog primitive, providing a fully accessible and customizable modal dialog for critical user interactions.