A short interrupting confirm with Cancel and one action; focus starts on Cancel and the scrim never dismisses it.
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.
Installation
npx shadcn@latest add KezLahd/rime/alert-dialogAlso installs: base, button, icon, scroll-area.
Usage
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}
/>Examples
Open
Delete Project Atlas?
Its 12 tasks and 48 files are deleted with it. This cannot be undone.
Danger, with a busy state
Default tone
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
AlertDialog
| Prop | Type | Default | Description |
|---|---|---|---|
| openRequired | boolean | ||
| onCancelRequired | () => void | Cancel, Esc. There is no scrim click: the choice must be made. | |
| onActionRequired | () => void | The action button. Close the dialog yourself once it has run. | |
| titleRequired | ReactNode | ||
| description | ReactNode | ||
| actionLabelRequired | 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 |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --alert-dialog-radius | var(--r-xl) | … |
| --alert-dialog-title-size | 18px | … |
| --alert-dialog-width | 440px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --danger-fill | tokens.css | … |
| --danger-ink | tokens.css | … |
| --danger-line | tokens.css | … |
| --density | tokens.css | … |
| --dur | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --font-display | tokens.css | … |
| --ink-body | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --modal-blur | tokens.css | … |
| --modal-scrim | tokens.css | … |
| --modal-scrim-blur | tokens.css | … |
| --modal-shadow | tokens.css | … |
| --modal-surface | tokens.css | … |
| --r-md | tokens.css | … |
| --r-xl | tokens.css | … |
| --text-body | tokens.css | … |
| --text-small | tokens.css | … |
| --tracking-display | tokens.css | … |
| --z-modal | tokens.css | … |
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 and don't
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".
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open alert-dialog.mdRelated: modal, type-to-confirm