---
url: https://brand.okrado.com/patterns/alert-dialog/
title: Alert dialog
description: A modal that interrupts for a decision that cannot be taken back, and the ready-made confirmation.
kind: reference
owner: hmdmsd
updated: 2026-11-03
review_by: 2027-02-28
audience:
  - designer
  - developer
  - agent
---

# Alert dialog

> A modal that interrupts for a decision that cannot be taken back, and the ready-made confirmation.

Use an alert dialog when the person must decide before anything else happens and the action cannot be undone: delete, discard, revoke. The title names the action and the description states the consequence. The least destructive button has focus first. For a plain confirmation use `ConfirmDialog`, which composes it.

## Behaviour

Read from the component manifest, so this is the component’s own contract. See [Overlays](https://brand.okrado.com/patterns/overlays/) for layers, stacking and dismissal shared by all layers.

### `AlertDialog`

| Stage         | beta                                                                                                                                                                                    |
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Keyboard      | - Tab and Shift+Tab loop inside the dialog
- Escape cancels
- Enter or Space presses the focused button                                                                                 |
| Dismissal     | * escape: cancels
* outside press: no
* close button: optional                                                                                                                          |
| Stacking      | Opens over a dialog or a drawer (discard, delete); nothing opens over it; an AlertDialog may be a terminal third layer; no other third modal.                                           |
| Accessibility | - `role="alertdialog"`, named by its title and described by the consequence; focus is trapped, the page behind is inert and does not scroll, and focus returns to the trigger on close. |
| Pattern       | [APG: alertdialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)                                                                                                               |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs)                                                                                               |

### `AlertDialogContent`

| Stage         | beta                                                                                                                                                                                        |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Accessibility | - The title names the dialog and the consequence describes it; give the `initialFocus` prop a ref to the Cancel button (ConfirmDialog does) so the destructive action is never the default. |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/primitives-alertdialog--docs)                                                                                                   |

### `ConfirmDialog`

| Stage         | beta                                                                                                                                                                                                                                                                                                                   |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Keyboard      | - Tab and Shift+Tab loop inside the dialog
- Escape cancels
- Enter presses the focused button                                                                                                                                                                                                                         |
| Dismissal     | * escape: cancels
* outside press: no
* close button: none, Cancel is the way out                                                                                                                                                                                                                                      |
| Stacking      | Opens over a dialog or a drawer; nothing opens over it.                                                                                                                                                                                                                                                                |
| Accessibility | - `role="alertdialog"`; Cancel is focused first; Escape cancels and an outside press does not close it. With `confirmName` the input is labelled, the name is shown in mono, and the action stays pressable but says why it does nothing yet (`aria-disabled` and a visible hint), so the reason is read, not guessed. |
| Pattern       | [APG: alertdialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/)                                                                                                                                                                                                                                              |
| Docs          | [Storybook](https://brand.okrado.com/components/?path=/docs/components-confirmdialog--docs)                                                                                                                                                                                                                            |