Alert Dialog
OverlaysA modal dialog that interrupts the user with important content and expects a response.
Import
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";Usage
Default
A simple alert dialog with a cancel and continue action.
Destructive
An alert dialog for destructive actions.
API Reference
defaultOpen—booleanThe open state of the dialog when it is initially rendered
open—booleanThe controlled open state of the dialog
onOpenChange—(open: boolean) => voidEvent handler called when the open state of the dialog changes
| Prop | Type | Default | 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 of the dialog changes |