Skip to content

Confirm or undo destructive actions

Patterns

Prevent irreversible mistakes: offer undo for actions that can be reversed, and confirm only those that can’t.

How it works

  1. If the action can be reversed, do it at once and offer Undo in a toast that stays long enough to read and act on.
  2. If it cannot, confirm in place with a Confirmation that names what will be lost and how many.
  3. Make the confirm button name the action ("Delete 3 documents"), not "OK".
  4. After the action, report the outcome and move focus somewhere sensible: the next row, or the list.

Elements

Confirmation · Overlay · Toast · Button · Banner

Usability

Do
  • Use the error color only for the destructive button, not the whole dialog.
Don’t
  • Don’t ask for confirmation of actions that can be undone.
  • Don’t dismiss an Undo toast while it has focus or the pointer.

Accessibility

  • Confirmations use role="alertdialog" with a name and a description, and focus the least destructive action first.
  • Undo toasts are reachable by keyboard and stay at least 5 seconds plus reading time.

Test your implementation too. Each element’s own contract is on its page; a flow adds focus moves and announcements that need their own keyboard and screen reader check.

All patterns