# Alert Dialog

An accessible React alert dialog for Next.js that asks people to confirm destructive actions, with focus starting on Cancel, built on Radix Alert Dialog.

Source: https://ui.fewtone.com/components/alert-dialog

## Installation

```bash
npx shadcn@latest add https://ui.fewtone.com/r/alert-dialog.json
```

## Usage

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

export function DeleteAccount() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete account</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete your account?</AlertDialogTitle>
          <AlertDialogDescription>
            Your projects and settings go with it. You can't undo this.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive" onClick={deleteAccount}>
            Delete account
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}
```

## API reference

### AlertDialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – | Whether it's open, when you control it. |
| `defaultOpen` | `boolean` | `false` | Whether it starts open. |
| `onOpenChange` | `(open: boolean) => void` | – | Called when it opens or closes: the trigger, Cancel, the action or Escape. |

### AlertDialogTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` | Use your own element, such as a Button, as the trigger. |

### AlertDialogContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onOpenAutoFocus` | `(event: Event) => void` | – | Runs as focus moves to Cancel. Call event.preventDefault() to focus something else yourself. |
| `onCloseAutoFocus` | `(event: Event) => void` | – | Runs as focus goes back to the trigger. Call event.preventDefault() to send it elsewhere. |
| `onEscapeKeyDown` | `(event: KeyboardEvent) => void` | – | Runs when Escape is pressed. Call event.preventDefault() to keep it open. |

### AlertDialogHeader

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### AlertDialogFooter

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### AlertDialogTitle

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### AlertDialogDescription

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

### AlertDialogAction

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"default"` | The button style. Use destructive for actions that remove things. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The button height. |

### AlertDialogCancel

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"outline"` | The button style. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The button height. |

### AlertDialogPortal

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `container` | `HTMLElement` | `document.body` | Where to render instead. |

### AlertDialogOverlay

| Prop | Type | Default | Description |
| --- | --- | --- | --- |

**When to use it:** Use AlertDialog to confirm an action that is destructive or can't be undone, such as deleting. It needs an explicit answer: the backdrop doesn't close it. For anything else in a modal, use Dialog.
**Built on:** Radix Alert Dialog.
**Accessibility pattern:** https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
**npm packages (installed by the CLI):** class-variance-authority@^0.7.1, motion@^14.0.0, radix-ui@^1.7.0.
**Installs these FewTone UI components with it:** `button`, `dialog`.

## Examples

### Delete project

Focus starts on Cancel, so pressing Enter by reflex does no harm. Escape cancels; clicking the backdrop does nothing. Like Dialog, the window grows out of its trigger.

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

export default function AlertDialogDeleteProject() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Delete project</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete project?</AlertDialogTitle>
          <AlertDialogDescription>
            This permanently deletes Acme Web, with its deployments and domains. You can't undo this.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction variant="destructive">Delete project</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
```

## Related

- [Dialog](https://ui.fewtone.com/components/dialog.md): An accessible React dialog for Next.js and Tailwind CSS: a modal window that grows out of its trigger, keeps focus inside and returns it, built on Radix Dialog.
- [Button](https://ui.fewtone.com/components/button.md): An accessible React button for Next.js and Tailwind CSS with six variants, three sizes, icons and a soft tint on hover and press, built on a native button.