Alert Dialog
A modal confirmation for important or potentially destructive actions.
Overview
Alert Dialog is for irreversible confirmations—delete, discard, reset. Prefer Dialog when the surface needs a form or multi-step task.
Preview
Installation
Add the component with the CLI. It copies the files in and installs anything they depend on.
npx vinyaas add alert-dialogUsage
import { Button } from "@/components/ui/button";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
export function DeleteProjectDialog() {
return (
<AlertDialog>
<AlertDialogTrigger>
<Button variant="destructive">Delete project</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Delete project?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. This will permanently delete the
project and all associated data.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction variant="destructive">Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}Examples
Basic
A simple confirmation with Cancel and Continue.
Destructive action
Use the destructive button variant when the confirm action is irreversible.
Controlled
Drive open state from the parent when needed.
Closed
Projects table
A dashboard row action that opens a destructive confirmation before deleting. On small screens the trigger collapses to an icon.
Projects
| Project | Owner | Status | Actions |
|---|---|---|---|
| Vinyaas | Sarang | Active | |
| Dashboard | Priya | Review | |
| Mobile App | Aarav | Draft |
In practice
A project row keeps the destructive action behind a confirmation. On small screens the trigger collapses to an icon; Cancel stays available and the badge names what will be removed.
vinyaas-web
Production · us-east-1
API
Other attributes for the underlying element are passed through.
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
defaultOpen | boolean | false | Opens the dialog on first render when it is uncontrolled. |
onOpenChange | (open: boolean) => void | — | Called when the dialog opens or closes. |
className | string | — | Merged onto the part with cn. |
variant | ButtonProps["variant"] | — | Available on AlertDialogAction and AlertDialogCancel. Cancel defaults to outline. |
Accessibility
- The panel is
role="alertdialog"andaria-modal="true", with title and description wired througharia-labelledbyandaria-describedby. - Focus moves to Cancel when the dialog opens; Tab cycles inside the panel.
- Escape cancels and returns focus to the trigger. Overlay clicks do not dismiss.
- Cancel and Action are keyboard-accessible buttons with clear focus-visible styles. Icon-only triggers need an accessible name.