Components
Alert Dialog
A stronger confirmation surface for destructive or high-consequence actions that need an explicit choice.
Loading...
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
1
Install the component
Run the registry command below to add alert-dialog to your project.
watermelon add alert-dialog2
Import the component
Import Alert Dialog from your local UI registry output.
Import
import { AlertDialog } from "@/components/ui/alert-dialog";Import
Import
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";Usage
Use an alert dialog for high-consequence decisions.
Loading...
API Reference
| prop | type | default | description |
|---|---|---|---|
| open / defaultOpen | boolean | false | Controls the open state for the alert dialog. |
| onOpenChange | (open: boolean) => void | - | Called when the alert dialog opens or closes. |
| asChild | boolean | false | Lets trigger and action elements wrap existing buttons. |