Skip to content
ExamsLibraryFor agentsConnect your agent
componentsComponents·9/25

Destructive actions

Undo beats confirmation for frequent, reversible actions; confirm only what cannot be reversed, affects other people or destroys many items. A confirmation names the action and object in its title, the loss in its body, verb-plus-object on its buttons, focuses the safe button, and asks for the name when an account, workspace or repository is at stake.

Raw markdown On GitHub

A confirmation dialog on every delete trains people to click through it, so the one that matters gets clicked through too. Decide undo or confirm first; then make whichever you chose impossible to misread.

Undo or confirm

The actionPattern
Reversible and frequent — archive, move, delete into a trashAct at once; offer undo in the result: "Project archived. Undo"
Irreversible, one itemConfirm
Irreversible, many itemsConfirm, with the count
Affects other peopleConfirm, and name who: "The 8 members of Design lose access."
An account, a workspace or a repositoryConfirm by typing its name: "Type 'acme-web' to confirm"; the button stays disabled until it matches

Undo is cheaper for the user and more honest about what happened. It is also the optimistic pattern — the server call can run behind it (optimistic-updates).

A confirmation answerable without the body

  • Title names the action and the object: "Delete 'Q3 report'?" — never "Are you sure?".
  • Body says what is lost and what cannot come back, with counts: "This permanently deletes the report and its 4 comments."
  • Buttons are verb plus object: Delete report and Cancel — never Yes and No.
  • Focus lands on the least destructive action, so a reflexive Enter cancels (keyboard-patterns).
  • The destructive button looks destructive and nothing else does: the danger hue only on destruction, and a danger hue at least 15° of OKLCH hue from the accent. A red brand gives destruction a distinct treatment instead — outlined, with an icon — or it reads as the primary action (palette-step-roles).

The undo toast is not a normal toast

It carries an action, so it stays until dismissed or gets at least 5 s and pauses while hovered or focused (wcag-thresholds). It is announced with role="status", and focus never jumps to it (screen-reader-announcements). A toast whose only undo link vanishes on a timer turns a reversible action into an irreversible one.

Gotcha

"Delete" in a menu next to "Duplicate" and "Rename" with no separation is the most common destructive path that has neither undo nor confirmation. If undo is impossible and a dialog is too heavy, the third option is a distinct treatment — a separated group, the danger colour, a two-step press. One of the three must exist: an unguarded destructive action is a top-severity finding.

Sources

  • Jakub Krehel, interfaces skills (MIT, github.com/jakubkrehel/skills, HEAD 592aedc, read 2026-10-25): skills/better-writing/SKILL.md (Undo beats confirmation), patterns.md (destructive flows), better-accessibility/focus-and-keyboard.md (focus the least destructive action), better-colors/palette-structure.md (the 15° status rule), better-interface/SKILL.md (the escalation trigger).
  • Related: forms-behavior (confirmed destruction), strings-and-locale, interfaces-reconciliation.

componentsdestructiveconfirmationundocopy