Undo and destructive actions

Carry out most removals at once and keep them reversible for a few seconds. Ask first only when the action is rare and nothing can bring the data back.

Undo or ask first

Sita GurungWelder for Split, from NepalInterview
Ravi KumarWelder for Split, from IndiaTrade test
Bikash ThapaPipe fitter for Split, from NepalOffer sent
Anjali RaiWelder for Split, from NepalNew

Undo keeps people moving and still protects them. A question before each deletion teaches people to press the confirming button without reading it.

Act at once, then offer Undo

Archive a candidate
Move a candidate to another stage
Remove a candidate from a shortlist

5 s: to take any of them back

Ask first

Delete a candidate permanently
Close a job and notify every applicant
Close a form with unsaved entries

The undo toast

The toast says what happened, in the past tense, with the object: Candidate archived, or 12 candidates archived. The button beside it reads Undo.

One undo toast shows at a time. A second undoable action carries out the first and takes its place. The countdown pauses while the pointer rests on the toast or focus is inside it.

When the time runs out, the action is carried out, and the candidate can still be found where they went, such as the archive of the board.

12 candidates archived

Window: 5 seconds
Undo button: at least 24 px high, 44 px on touch screens
Position on a wide screen: bottom center, 24 px above the window edge; --space-6

Asking first

Ask in a small confirmation dialog. The title is the question and names the object. The body states what is lost and for whom. The buttons are Cancel and the verb of the title, and the verb takes the danger button when it deletes.

Focus starts on Cancel and Escape answers Cancel, so a key pressed out of habit loses nothing.

Sita GurungWelder for Split, from NepalInterview
Ravi KumarWelder for Split, from IndiaTrade test
Bikash ThapaPipe fitter for Split, from NepalOffer sent

Actions on a selection

A selection follows the same rule. Archiving 3 candidates asks nothing, and Undo brings all three back.

Deleting a selection permanently asks in place: the selection bar turns into the question with Cancel and Delete, and the list stays in view.

Delete 3 candidates permanently?

When a change fails

The list changes at once, and the change is saved when the time runs out. If it cannot be saved then, the rows come back and a toast says so: Some candidates could not be changed.

Undo instead of a question

Permitted

Candidate archived, with Undo
The action happened, and people can take it back.
Delete this candidate permanently?
Asked once, before the one step that cannot be reversed.

Not permitted

Are you sure you want to archive this?
Archiving can be undone, so the question only slows people down.
A Do not ask again checkbox
A question worth silencing should become an Undo.

NextFiles and uploads

Undo and destructive actions

Decide between acting at once with Undo and asking first, and shape both.

Kind: pattern
Page: https://design.werklist.com/patterns/undo
Version: 2.1.2

When to use it

Any change that can be restored: archiving a candidate, moving a candidate to another stage, removing a candidate from a shortlist
A confirmation before a rare action nothing can restore, before an irreversible change for other people, or before losing typed entries

When not to use it

A confirmation before an action that can be undone
A Do not ask again checkbox
Typing the name of the object to confirm
A button that has to be pressed twice to confirm

Rules

Act at once and offer Undo for any change that can be restored.
Ask first only for a rare action nothing can restore, an irreversible change for other people, or closing a form with unsaved entries.
A selection follows the same rule. Archiving a selection asks nothing and Undo brings every row back. Deleting a selection permanently asks in place on the selection bar.
One undo toast at a time. A second undoable action carries out the first and takes its place.
Undo stays open for 5 seconds.
The countdown pauses while the pointer rests on the toast or focus is inside it.
When the time runs out, the action is carried out and the item can still be found where it went.
The Undo button is at least 24 px high, 44 px on touch screens. On a wide screen the toast sits at the bottom center, 24 px above the window edge.
A screen reader announces the toast once, when it appears. The countdown is not announced.
Ask in the small confirmation dialog. The title is a question that names the object, and the body says what is lost and for whom.
The buttons are Cancel and the verb of the title. The verb takes the danger style when it deletes.
Focus starts on Cancel, Escape answers Cancel, and a press on the dimmed page does nothing.
If a change cannot be saved when the time runs out, the rows come back and a toast says so.

Content

Toast: the past tense, with the object and its count: Candidate archived, 12 candidates archived. The button reads Undo, or a more exact word such as Restore.
Confirmation titles: Delete this candidate permanently? Close this job and notify 38 applicants?
Confirmation body: Every applicant for Welder in Split receives an email that the role is filled. An email that has gone out cannot be taken back.
Failure: Some candidates could not be changed.

Tokens

--space-6
--layer-toast
--glass-fill-raised
--elevation-3
--brand-ink
--error-ink

JSON

{
  "title": "Undo and destructive actions",
  "path": "/patterns/undo",
  "url": "https://design.werklist.com/patterns/undo",
  "text": "https://design.werklist.com/agent/patterns/undo",
  "summary": "When to act at once and offer Undo, and when to ask before an action that nothing can reverse.",
  "version": "2.1.2",
  "kind": "pattern",
  "name": "Undo and destructive actions",
  "purpose": "Decide between acting at once with Undo and asking first, and shape both.",
  "use": [
    "Any change that can be restored: archiving a candidate, moving a candidate to another stage, removing a candidate from a shortlist",
    "A confirmation before a rare action nothing can restore, before an irreversible change for other people, or before losing typed entries"
  ],
  "avoid": [
    "A confirmation before an action that can be undone",
    "A Do not ask again checkbox",
    "Typing the name of the object to confirm",
    "A button that has to be pressed twice to confirm"
  ],
  "rules": [
    "Act at once and offer Undo for any change that can be restored.",
    "Ask first only for a rare action nothing can restore, an irreversible change for other people, or closing a form with unsaved entries.",
    "A selection follows the same rule. Archiving a selection asks nothing and Undo brings every row back. Deleting a selection permanently asks in place on the selection bar.",
    "One undo toast at a time. A second undoable action carries out the first and takes its place.",
    "Undo stays open for 5 seconds.",
    "The countdown pauses while the pointer rests on the toast or focus is inside it.",
    "When the time runs out, the action is carried out and the item can still be found where it went.",
    "The Undo button is at least 24 px high, 44 px on touch screens. On a wide screen the toast sits at the bottom center, 24 px above the window edge.",
    "A screen reader announces the toast once, when it appears. The countdown is not announced.",
    "Ask in the small confirmation dialog. The title is a question that names the object, and the body says what is lost and for whom.",
    "The buttons are Cancel and the verb of the title. The verb takes the danger style when it deletes.",
    "Focus starts on Cancel, Escape answers Cancel, and a press on the dimmed page does nothing.",
    "If a change cannot be saved when the time runs out, the rows come back and a toast says so."
  ],
  "content": [
    "Toast: the past tense, with the object and its count: Candidate archived, 12 candidates archived. The button reads Undo, or a more exact word such as Restore.",
    "Confirmation titles: Delete this candidate permanently? Close this job and notify 38 applicants?",
    "Confirmation body: Every applicant for Welder in Split receives an email that the role is filled. An email that has gone out cannot be taken back.",
    "Failure: Some candidates could not be changed."
  ],
  "tokens": [
    "--space-6",
    "--layer-toast",
    "--glass-fill-raised",
    "--elevation-3",
    "--brand-ink",
    "--error-ink"
  ]
}

Raw file: https://design.werklist.com/agent/patterns/undo