# AlertDialog

> A short interrupting confirm with Cancel and one action; focus starts on Cancel and the scrim never dismisses it.

Category: Overlays. Docs page: https://rime.mjsons.net/components/alert-dialog

## Installation

```bash
npx shadcn@latest add KezLahd/rime/alert-dialog
```

AlertDialog asks one question with two answers. It is role="alertdialog": focus starts on Cancel, so a stray Enter never confirms; Esc cancels; Tab is trapped; a click on the scrim does nothing, because the choice must be made.

tone="danger" draws a warning tile and the danger button. busy locks both buttons and shows a spinner on the action while it runs. The header keeps one left edge. It wears the --modal-* glass, so it matches Modal in every preset.

inline renders the open panel in the page flow: no portal, scrim, focus trap, scroll lock or outside-click listener. It exists for docs, previews and static mock-ups; never ship it as the live overlay.

## Usage

```tsx
import { AlertDialog } from "@/components/ui";

<AlertDialog
  open={open}
  tone="danger"
  title="Delete Project Atlas?"
  description="Its 12 tasks and 48 files are deleted with it."
  actionLabel="Delete project"
  onCancel={() => setOpen(false)}
  onAction={remove}
  busy={pending}
/>
```

## Props: AlertDialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` (required) | `boolean` |  |  |
| `onCancel` (required) | `() => void` |  | Cancel, Esc. There is no scrim click: the choice must be made. |
| `onAction` (required) | `() => void` |  | The action button. Close the dialog yourself once it has run. |
| `title` (required) | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `actionLabel` (required) | `string` |  | A verb plus the object: "Delete project", never "OK". |
| `cancelLabel` | `string` |  |  |
| `tone` | `"default" \| "danger"` |  | danger draws the action in the danger fill and a warning tile. |
| `busy` | `boolean` |  | The action is in flight: both buttons lock and the action shows a spinner. |
| `busyLabel` | `string` |  |  |
| `children` | `ReactNode` |  | Extra content under the description: a short list of what changes. |
| `inline` | `boolean` |  | Render the open panel in the page flow: no portal, scrim, focus trap or scroll lock (docs, previews). |
| `className` | `string` |  |  |

## Examples

### Open

```tsx
<AlertDialog inline open tone="danger" title="Delete Project Atlas?" description="…" actionLabel="Delete project" onCancel={…} onAction={…} />
```

### Danger, with a busy state

```tsx
<AlertDialog open={open} tone="danger" … busy={pending} busyLabel="Deleting…" />
```

### Default tone

```tsx
<AlertDialog open={open} title="Discard this draft?" actionLabel="Discard draft" cancelLabel="Keep editing" … />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--alert-dialog-radius` | `var(--r-xl)` |
| `--alert-dialog-title-size` | `18px` |
| `--alert-dialog-width` | `440px` |

System tokens it reads: `--danger-fill`, `--danger-ink`, `--danger-line`, `--density`, `--dur`, `--dur-slow`, `--ease`, `--ease-out`, `--font-display`, `--ink-body`, `--ink-heading`, `--ink-secondary`, `--modal-blur`, `--modal-scrim`, `--modal-scrim-blur`, `--modal-shadow`, `--modal-surface`, `--r-md`, `--r-xl`, `--text-body`, `--text-small`, `--tracking-display`, `--z-modal`.

## Accessibility

- role="alertdialog" with aria-modal, labelled by the title and described by the description, so both are read on open.
- Initial focus is Cancel. Esc cancels; the scrim does not.
- busy sets aria-busy and disables both buttons until the action settles.

## Do

- Name the action with a verb and the object: "Delete project".
- Say in the description what is lost.

## Don't

- Don't use it for forms; that is Modal.
- Don't use it for very large irreversible changes; that is TypeToConfirmModal.
- Never label the action "OK" or "Yes".

Related: https://rime.mjsons.net/components/modal, https://rime.mjsons.net/components/type-to-confirm