Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Installation
pnpm dlx shadcn@latest add https://reui.io/r/alert-dialog.json
Examples
Default
Destructive
API Reference
This component is built using Radix UI AlertDialog primitives. For detailed information, please visit the full API reference.
AlertDialog
This component is based on the AlertDialog.Root primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant | ||
dismissable | ||
className |
AlertDialogTrigger
This component is based on the AlertDialog.Trigger primitive. For more details, refer to the original documentation.
AlertDialogContent
This component is based on the AlertDialog.Content primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
AlertDialogOverlay
This component is based on the AlertDialog.Overlay primitive. For more details, refer to the original documentation.
AlertDialogHeader
This component is a custom implementation and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
AlertDialogFooter
This component is a custom implementation and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
AlertDialogTitle
This component is based on the AlertDialog.Title primitive. For more details, refer to the original documentation.
AlertDialogDescription
This component is based on the AlertDialog.Description primitive. For more details, refer to the original documentation.
AlertDialogAction
This component is based on the AlertDialog.Action primitive and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant |
AlertDialogCancel
This component is based on the AlertDialog.Cancel primitive. For more details, refer to the original documentation.