On this page
Overview
Show code, UndoInstead.tsx
Variants
Type to confirm
Where an action can't be undone and reaches many people or much work, the dialog asks for the name.
- Its confirm button stays disabled until the name matches.
- The field's description says what to type.
Show code, TypeToConfirm.tsx
Bulk delete
The count is in the button, the question and the confirm button: "Delete 2 documents…".
Show code, BulkDelete.tsx
Behaviour
Undo
Archiving happens at once, and a toast offers Undo, which puts the item back where it was.
Rules
Asking "Are you sure?" before everything trains people to confirm without reading.
Use it when
- Deleting, removing, archiving or ending something
- An action that affects others or can't be undone
Built from
Which to use
Match the friction to what is at stake.
- Undo in a toast
An action that can be undone, and that people take often.
- Confirm in place
An action that can't be undone, with little at stake, through a ConfirmButton.
- Confirm in a dialog
Deleting something people made, or something that affects others, through a danger ConfirmDialog.
- Type the name
An action that can't be undone and reaches many people or much work.
Where little is at stake, the button arms in place and a second press removes the file.
Show code, RemoveFile.tsx
Show code, DangerKeptForDelete.tsx
Show code, DangerEverywhere.tsx
Content
Each label names the action and its object: never "Are you sure?", "Yes" or "OK".
- A confirmation's title asks the question with the object's name, "Delete Website refresh?".
- Its description says the consequence and whether it can be undone.
- The confirm button repeats the verb and the object, "Delete project", and the other stays Cancel.
- A button armed in place is short and has no question mark, "Remove file".
- One verb runs from the trigger to the button: Delete when it's gone, Remove when it leaves a place, Archive when it can come back.
- A trigger that opens a confirmation ends in an ellipsis.
- The undo toast names what happened, "Website refresh archived.".
Accessibility
Focus and keyboard
When the action removes its own control, move focus to the next row, or to the list.