Components
Alert Dialog
A stronger confirmation surface for destructive or high-consequence actions that need an explicit choice.
Tap to show a QR code for the Expo showcase deep link. The web preview below runs in the browser.
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. |