Alert Dialog
A modal dialog that interrupts the user with important content and requires an explicit action, built on top of Base UI.
Installation
$ npx shadcn@latest add "/r/alert-dialog.json"
Usage
Examples
Custom Trigger
You can use any component as a trigger by using the render prop on AlertDialogTrigger.
Props
| Component | Description |
|---|---|
AlertDialog | The root component that manages the dialog state. |
AlertDialogTrigger | The component that opens the dialog. |
AlertDialogContent | The container for the dialog content, including backdrop. |
AlertDialogHeader | Contains the title and description for the dialog. |
AlertDialogFooter | Contains the action and cancel buttons. |
AlertDialogTitle | The accessible title for the dialog. |
AlertDialogDescription | The accessible description for the dialog. |
AlertDialogAction | A button that performs the primary action (styled as an error button). |
AlertDialogCancel | A button that cancels the action (styled as a secondary button). |