# AlertDialog

> Modal that interrupts to ask for a decision before something consequential (WAI-ARIA `alertdialog`).

Source: https://ui.jcsoftdev.com/docs/components/alert-dialog

Modal that interrupts to ask for a decision before something consequential
(WAI-ARIA `alertdialog`). Pass `title` and `onConfirm` for the props API, or compose
`AlertDialog.Root` with `Trigger`, `Content`, `Title`, `Description`, `Cancel` and `Action`. There is no close button and a press outside does nothing:
the user answers with Cancel, Escape or Confirm. While `onConfirm` is pending, every way
out is disabled so the action runs exactly once.

## Import

```ts
import { AlertDialog } from "@jcsoftdev/ui/overlays";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/overlays/alert-dialog`.

## Usage

```tsx
<AlertDialog
  trigger={<Button variant="danger">Delete appointment</Button>}
  title="Delete this appointment?"
  description="Marco Salazar will be notified and the slot becomes free."
  confirmLabel="Delete"
  tone="danger"
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` |  |  |
| `defaultOpen` | `boolean` | `false` |  |
| `onOpenChange` | `((open: boolean) => void)` |  |  |
| `trigger` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` |  | Element that opens the dialog. Omit it to drive the dialog with `open`. |
| `confirmDisabled` | `boolean` | `false` | Disables the confirm button, e.g. until a reason is typed. A pending confirm disables it anyway. |
| `cancelDisabled` | `boolean` | `false` | Disables the cancel button. Escape still cancels. A pending confirm disables it anyway. |
| `title` * | `ReactNode` |  | What is being asked, as a question or a verb phrase ("Delete this appointment?"). |
| `description` | `ReactNode` |  | The consequence, said plainly. Linked to the dialog with `aria-describedby`. |
| `children` | `ReactNode` |  | Extra content between the description and the buttons. |
| `tone` | `"danger" \| "default"` | `"default"` | `danger` styles the confirm button as destructive. |
| `confirmLabel` | `string` |  | Defaults to the localized "Confirm". |
| `cancelLabel` | `string` |  | Defaults to the localized "Cancel". |
| `onConfirm` * | `() => Promise<ConfirmResult> \| Promise<void>` |  | Runs on confirm. The dialog shows a pending state, ignores a second press and cannot be dismissed until it settles, then closes. Return `{ ok: false, error }` or throw to keep it open with a message. |
| `onCancel` | `(() => void)` |  | Runs when the user cancels (Cancel button or Escape), not when a confirm succeeds. |
| `initialFocus` | `"confirm" \| "cancel"` | `"cancel"` | Which button gets focus when the dialog opens. Cancel is the safe default. |
| `material` | `"solid" \| "glass" \| "glass-clear" \| "liquid" \| "liquid-clear"` |  | Surface material; see `DialogContent`. |
| `container` | `HTMLElement \| null` |  | Portal target. Defaults to `document.body`; pass an element to keep a scoped `data-style`. |
| `className` | `string` |  |  |
| `classNames` | `Partial<Record<AlertDialogPart, string>>` |  | Per-part classes merged with `cn`; consumer classes win. `className` still targets the panel and is merged last. |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/overlays-alertdialog--default)
- [Escape Cancels](/storybook/?path=/story/overlays-alertdialog--escape-cancels)
- [Outside Press Does Nothing](/storybook/?path=/story/overlays-alertdialog--outside-press-does-nothing)
- [Confirm Runs Once And Closes](/storybook/?path=/story/overlays-alertdialog--confirm-runs-once-and-closes)
- [Pending Blocks Every Way Out](/storybook/?path=/story/overlays-alertdialog--pending-blocks-every-way-out)
- [Returned Failure Keeps It Open](/storybook/?path=/story/overlays-alertdialog--returned-failure-keeps-it-open)
- [Thrown Failure Shows Generic Message](/storybook/?path=/story/overlays-alertdialog--thrown-failure-shows-generic-message)
- [Focus On Confirm](/storybook/?path=/story/overlays-alertdialog--focus-on-confirm)
- [Controlled](/storybook/?path=/story/overlays-alertdialog--controlled)
- [In Spanish](/storybook/?path=/story/overlays-alertdialog--in-spanish)
- [Confirm Disabled](/storybook/?path=/story/overlays-alertdialog--confirm-disabled)
- [Cancel Disabled](/storybook/?path=/story/overlays-alertdialog--cancel-disabled)
- [Composed](/storybook/?path=/story/overlays-alertdialog--composed)
- [Composed Escape And Outside](/storybook/?path=/story/overlays-alertdialog--composed-escape-and-outside)
- [Composed Action Can Keep It Open](/storybook/?path=/story/overlays-alertdialog--composed-action-can-keep-it-open)

## Source

`packages/ui/src/overlays/alert-dialog/alert-dialog.tsx`