Skip to content
Try free

AlertDialog

A confirmation that interrupts: focus starts on Cancel, the action is a verb, Esc cancels.

  • Free core, MIT
  • Version 2.0.0-rc.1
  • APG pattern: Alert dialog

Examples

These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.

Default

Show the code

Default, code

<DialogTrigger><Button variant="destructive">Remove Tom Ellis</Button><AlertDialog {...args} /></DialogTrigger>

Open

Show the code

Open, code

<DialogTrigger defaultOpen><Button variant="destructive">Remove Tom Ellis</Button><AlertDialog {...args} /></DialogTrigger>

Not destructive

Show the code

Not destructive, code

<DialogTrigger defaultOpen>
  <Button variant="outline">Leave without saving</Button>
  <AlertDialog tone="default" title="Leave this page?" description="Your draft is saved, so you can come back to it." actionLabel="Leave page" cancelLabel="Stay" onAction={() => {}} />
</DialogTrigger>

Install

The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).

Install

npm i @superduperui/react @superduperui/tokens

Import

import { AlertDialog } from "@superduperui/react"

Props

AlertDialog also takes the props of the React Aria component it’s built on.

AlertDialog props
PropTypeWhat it does
titlerequiredstringThe question, as the dialog's heading ("Remove Tom Ellis?").
descriptionrequiredReactNodeWhat happens, and whether it can be undone.
actionLabelrequiredstringThe action's label: a verb that names the result ("Remove member"), never "OK" or "Yes".
onActionrequired() => voidCalled when the action is confirmed. The dialog closes afterwards.
cancelLabelstringDefault 'Cancel'The safe choice, focused when the dialog opens. Default "Cancel".
tone'destructive' | 'default'Default 'destructive'destructive draws the action as a danger button. Default destructive.
childrenReactNodeExtra content between the description and the buttons (e.g. a "type the name to confirm" field).
isOpenboolean
onOpenChange(isOpen: boolean) => void

When to use it

Use it for

  • Deleting, removing or leaving with unsaved work
  • Any action that cannot be undone (3.3.6)

Use something else for

  • Actions that can be undone: do them and offer undo in a Toast
  • Long tasks: use Dialog

Accessibility

Screen readers announce "Remove Tom Ellis?, alert dialog, Tom will lose access..." then "Cancel, button".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.

Compact density meets AA (2.5.8, 24px targets), not AAA.

What your product still has to do

  • Name the action with a verb ("Remove member")
  • Prefer undo where you can

Shared patterns it ships with: 3.3.6 (confirm before an irreversible action); 2.4.12.

This release’s test results

Test results for AlertDialog in this release
axe-core (WCAG A, AA, AAA and best practice)60 runs across every story, theme, density and width: 0 violations
Rendered text contrast55 text runs: 0 below 7:1, lowest 8.43:1
Target size10 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)18 focus stops in 3 browser engines: all pass
Keyboard scriptChromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

AlertDialog keyboard steps
KeyWhat happens
TabTab reaches the trigger
EnterEnter opens it with focus on Cancel, the least destructive action
TabTab moves to the action
TabTab wraps inside the dialog
EscapeEsc cancels and focus returns to the trigger

In Figma

The Figma component is AlertDialog, with Tone (Destructive, Default). The Figma library isn’t published yet.

Figma to code: Tone → tone (Destructive = "destructive", Default = "default"); Title → title; Description → description; Content → children when Show content; nested Cancel → cancelLabel; nested Action → actionLabel.