ComponentsOverlays & menus

AlertDialog

Shared primitive

Confirm a consequential action with an explicit decision.

@/components/ui/alert-dialog

Composition preview

Try AlertDialog alongside its related overlays & menus components. These examples keep all actions local.

Usage

import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

<>
<AlertDialog>
  <AlertDialogTrigger asChild><Button variant="destructive">Delete</Button></AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader><AlertDialogTitle>Delete this record?</AlertDialogTitle><AlertDialogDescription>This cannot be undone.</AlertDialogDescription></AlertDialogHeader>
    <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={handleConfirmedDelete}>Delete record</AlertDialogAction></AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

open/onOpenChange; AlertDialogTitle, Description, Cancel, Action

Usage & accessibility

Name the consequence and count affected objects. Never perform a destructive action in a demo.

Implementation contract

src/components/ui/alert-dialog.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.

Agent instructions Markdown reference JSON manifest