Alert Dialog
A modal dialog for confirming destructive or important actions.
alert-dialog-demo.app
Installation
terminal.sh
npx y2kui@latest add alert-dialogUsage
import {
AlertDialog,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogAction,
AlertDialogCancel,
} from "@/components/ui/alert-dialog";
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="destructive">Delete</Button>
</AlertDialogTrigger>
<AlertDialogContent>...</AlertDialogContent>
</AlertDialog>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
AlertDialog | see Radix | — | Root. Accepts open, defaultOpen, onOpenChange. |
AlertDialogContent | ReactNode | — | Modal panel with navy border and pastel panel fill. |
AlertDialogHeader | ReactNode | — | Groups title and description. |
AlertDialogFooter | ReactNode | — | Groups action/cancel buttons. |
AlertDialogAction | ReactNode | — | Primary action button (default variant). |
AlertDialogCancel | ReactNode | — | Cancel button (outline variant). |