Skip to contentSkip to navigation
DocsDocs

ConfirmDialog

Asks people to confirm an action whose consequence needs a sentence.

BetaSince 1.0.0
On this page

Overview

Show code, DeleteProject.tsx

Variants

Neutral

An action people can get back from, such as archiving. The default.

Danger

An action that deletes or ends something.

Show code, ArchiveProject.tsx

Anatomy

  1. Dialog

  2. Question

  3. Description

  4. Cancel

  5. Confirm

Show code, ConfirmDialogAnatomy.tsx

Behaviour

Closing

A press outside doesn't close a ConfirmDialog.

An action that can fail

The dialog waits for its action, showing that it is working.

  • When the action fails, it stays open with the error, so people can try again.
Show code, AsyncWithError.tsx

From a menu

A menu item can open the dialog, and focus returns to the menu's button when it closes.

Show code, FromMenu.tsx

Rules

Match the tone to the consequence, and let the buttons say what each choice does.

Use it when

  • Deleting or ending something, once people read what it affects
  • Confirming an action from a menu item, which can't confirm in place
  • An action that takes a moment and can fail
DoThe danger tone for an action that deletes.
Show code, DangerForDelete.tsx
Don’tA neutral deletion: focus starts on Delete, so a hurried Enter deletes.
Show code, NeutralForDelete.tsx

Content

Ask the question in the title, and name the consequence on the confirm button.

DoButtons that name what each choice does.
Show code, NameTheConsequence.tsx
Don’tYes and No: people read the question again to choose.
Show code, YesNo.tsx

Accessibility

KeyAction
Tab, Shift+TabMoves between Cancel and the confirm button; focus stays in.
Enter in a field of the contentConfirms, as the confirm button does.
EscCloses the dialog, unless the action is running.

Related

  • Confirming a low-stakes action in place with a second press, such as removing a row.

  • A task with fields, a choice between several actions or content to review.

  • Undoing an action after it ran, such as an archived item.

  • A warning that needs no answer, shown in the page.