# Dialog and confirm

Status: stable

Ask the user to confirm before something that cannot be undone.

Dialogs interrupt to ask for a decision, usually to confirm something that cannot be undone. Use the native dialog element opened with showModal(), which handles focus and the Escape key for you.

## Example

```html
<dialog class="at-dialog" open aria-labelledby="dlg-title">
  <h2 id="dlg-title">Disconnect Rent Radar?</h2>
  <p>Rent Radar stops receiving updates. You can connect it again later.</p>
  <div class="at-dialog__actions">
    <button type="button" class="at-button">Cancel</button>
    <button type="button" class="at-button at-button--danger">Disconnect</button>
  </div>
</dialog>
```

## Anatomy

1. **Title**: h2, phrased as the question

2. **Body**: one or two sentences on what will happen

3. **Actions**: right-aligned; cancel first, then the action; action named for what it does

## Size and spacing

- **Container**: max-width: 28rem /* 448px */; padding: var(--at-space-6) /* 24px */; border-radius: var(--at-radius-2) /* 10px */

- **Actions**: margin-top: var(--at-space-5); gap: var(--at-space-3)

## When to use

- Confirming a destructive or irreversible action.

## When not to use

- Forms or long content: use a page.
- Information only: use an alert.
- Inside another dialog.

## Content

- Title as a question: "Disconnect Rent Radar?"
- Buttons say the action: "Disconnect", not "OK".

## Do and don't

Do: A question, and an action button that names the action.

```html
<dialog class="at-dialog" open aria-label="Do"><h2>Delete 3 readings?</h2><p>This cannot be undone.</p><div class="at-dialog__actions"><button type="button" class="at-button">Cancel</button><button type="button" class="at-button at-button--danger">Delete readings</button></div></dialog>
```

Don't: Vague title and Yes / No buttons.

```html
<dialog class="at-dialog" open aria-label="Don't"><h2>Are you sure?</h2><div class="at-dialog__actions"><button type="button" class="at-button">No</button><button type="button" class="at-button at-button--primary">Yes</button></div></dialog>
```

## Do

- Title it as the question.
- Name the action on the button: "Disconnect", not "OK".

## Don't

- Open a dialog from a dialog.

## Code

```html
<dialog class="at-dialog" open aria-labelledby="dlg-title">
  <h2 id="dlg-title">Disconnect Rent Radar?</h2>
  <p>Rent Radar stops receiving updates. You can connect it again later.</p>
  <div class="at-dialog__actions">
    <button type="button" class="at-button">Cancel</button>
    <button type="button" class="at-button at-button--danger">Disconnect</button>
  </div>
</dialog>
```

## Classes

| Class | What it does |

|---|---|

| `at-dialog` | Use on a native dialog element; opened with showModal() |

| `at-dialog__actions` | Right-aligned buttons |

## Tokens

`--at-border`, `--at-surface-overlay`, `--at-text`, `--at-shadow-overlay`

## Accessibility

- A native dialog with showModal() traps focus and closes on Escape.