Design system/Patterns
Confirmation and irreversible actions
An action that can't be undone has a confirmation dialog, and only one: ConfirmDialog, with a red trash can avatar, a sentence that says what will be lost, and two full-width buttons.
In codecomponents/confirm.tsx
Live example
Open the dialog and tap "Yes, delete" to see the in-progress state: both buttons are disabled and the backdrop no longer closes it, so the action isn't left half done.
Anatomy
- MarkA 48px soft red avatar with a trash can.
- QuestionA 17px heading: "Delete this action?"
- ConsequenceOne or more paragraphs: what goes with it, and whether it comes back.
- ApproveA full-width red button with a verb: "Yes, delete".
- CancelA full-width light button below it.
Rules
Do
State the consequence: "This action's attachments and story will be deleted too."
Don't
"Are you sure?"
Do
If the action can be undone, skip the confirmation: do it and offer a way back.
Don't
A confirmation dialog for every small reversible action.
Do
Red buttons only for destructive actions.
Don't
Red for "Sign out" or "Cancel subscription", which can still be reversed.
<ConfirmDialog
open={asking}
title={tr("این اقدام حذف شود؟")}
body={[tr("پیوستها و سرگذشتش هم حذف میشوند.")]}
busy={deleting}
onConfirm={remove}
onClose={() => setAsking(false)}
/>Sizes
max-width 380px · padding 32px · centered48px · icon 20px--red on --red-soft17px / 600 · margin-top 16px13px · --text-secondary · leading 24px · mt 6pxbtn-danger btn-field · 58px · full width · mt 20pxTouch 62px · icon 15pxbtn-ghost btn-field · mt 8pxdata-autofocusBottom sheet · buttons radius 12pxStates and accessibility
busy · both buttons disabled · .spinnerDoes not closerole="alertdialog" · aria-modal · aria-labelledbyaria-hidden5.14 : 1 · 5.54 : 1#fff on --red-strong; AA5.14 : 1 · 5.80 : 1--text-secondary on --card; AACancelTab cycles inside the dialog; on close, focus returns to the trigger- ConfirmDialog also closes with Escape, except while it's busy; Cancel and clicking the backdrop are the other two ways out. When it opens, initial focus is on "Cancel", the safe option, so a hasty Enter doesn't delete anything.
- The Cancel button comes second, below Confirm; on phones both are thumb-sized.
- The confirm button is btn-danger, and its white label on --red-strong meets AA; even so, it always has the trash icon and a full verb, with the consequence sentence above it, so meaning never relies on color alone.
Do
The confirm label is the action itself: “Yes, delete”, “Yes, cancel”.
Don't
“Confirm” or “OK” under a delete question.
Do
The title is a question with the thing's name: “Delete this action?”
Don't
“Warning!” that doesn't say what's going to happen.
Related pages