Dialog and confirm

Stable

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.

Disconnect Rent Radar?

Rent Radar stops receiving updates. You can connect it again later.

Cancel Disconnect

---

Specifications

LightDark

Anatomy

Disconnect Rent Radar?

Rent Radar stops receiving updates. You can connect it again later.

CancelDisconnect

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

Up to 28rem (448px) wide.

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)

---

Usage

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

Delete 3 readings?

This cannot be undone.

CancelDelete readings

DoA question, and an action button that names the action.

Are you sure?

NoYes

Don'tVague title and Yes / No buttons.

Do

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

Don't

• Open a dialog from a dialog.

---

Implementation

HTML

Copy

<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 used

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

---

Accessibility

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

Related

Button

Buttons do things. Links go places.

View component

Inline alert

A message about the whole page or a section: information, success, a warning or an error.

View component