Overlays and menus
Alert Dialog
A modal confirmation dialog for consequential actions, built on Base UI.
⠋
Install
npx shadcn@latest add https://4af.selfsimilar.dev/r/alert-dialog.jsonUsage
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
<AlertDialog>
<AlertDialogTrigger>Delete project</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogTitle>Delete project?</AlertDialogTitle>
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>API
Main exports: AlertDialog and its content, action, cancel, title, and description parts
A modal for confirming consequential actions. Backdrop clicks do not dismiss it; Escape and
close controls do. Place Cancel first, or set initialFocus, when cancellation should receive
initial focus.