A modal dialog that interrupts the user with important content and expects a response.
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog" import { Button } from "@/components/ui/button" export function AlertDialogDemo() { return ( <AlertDialog> <AlertDialogTrigger asChild> <Button variant="outline">Show Dialog</Button> </AlertDialogTrigger> <AlertDialogContent> <AlertDialogHeader> <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle> <AlertDialogDescription> This action cannot be undone. This will permanently delete your account and remove your data from our servers. </AlertDialogDescription> </AlertDialogHeader> <AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction>Continue</AlertDialogAction> </AlertDialogFooter> </AlertDialogContent> </AlertDialog> ) }
Prop | Type | Default | Description |
---|---|---|---|
open | boolean | - | The controlled open state of the dialog. |
onOpenChange | function | - | Event handler called when the open state of the dialog changes. |
defaultOpen | boolean | false | The open state of the dialog when it is initially rendered. |