# Alert Dialog (/docs/alert-dialog)

A modal confirmation dialog for consequential actions, built on Base UI.

## Install

```bash
npx shadcn@latest add https://4af.selfsimilar.dev/r/alert-dialog.json
```

## Usage

```tsx
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.