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-dialog

Usage

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
ProjectOwnerStatusActions
VinyaasSarangActive
DashboardPriyaReview
Mobile AppAaravDraft

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.

NameTypeDefaultDescription
openboolean—Controlled open state.
defaultOpenbooleanfalseOpens the dialog on first render when it is uncontrolled.
onOpenChange(open: boolean) => void—Called when the dialog opens or closes.
classNamestring—Merged onto the part with cn.
variantButtonProps["variant"]—Available on AlertDialogAction and AlertDialogCancel. Cancel defaults to outline.

Accessibility

  • The panel is role="alertdialog" and aria-modal="true", with title and description wired through aria-labelledby and aria-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.