Clinia UI

Destructive actions

How much friction to put in front of deleting, revoking or archiving, based on what a mistake would cost.

A destructive action removes something important that a user may want back, or should confirm first so a misclick does no harm. The friction added for the action should match the cost of a mistake: none for what's easy to undo, a clear stop for what isn't.

How to choose the friction

If the action is…Use
Reversible, such as archive or hideDo it at once, then offer Undo in a Sonner toast
Hard to reverse, on one itemAn Alert Dialog that names the item and the consequence
Irreversible, with wide impactAn Alert Dialog that also asks the user to type a validation, such as the item's name, before the action enables

Example

Source archived

Montréal intake is hidden from search.

Do archive at once, then offer Undo.

Archive this source?

You can restore it at any time.

Don't confirm something users can restore.

Do and Don't

Delete "Montréal clinic"?

Every source, index and API key in this workspace is removed. This can't be undone.

Do name the item and repeat the verb.

Are you sure?

This action can't be undone.

Don't ask yes or no with generic buttons.

Do

  • Do a reversible action at once, then offer Undo in a toast that stays at least 10 seconds (duration: 10_000), so the user can notice it, read it and act on it. Sonner's 4-second default is too short for an Undo.
  • Name the item in the dialog title, such as Delete "Montréal clinic"?.
  • Say in the description what goes with the item and whether it comes back.
  • Repeat the verb on the action button: Delete workspace, not Yes.
  • For an irreversible action with wide impact, ask the user to type a validation, such as the item's name, before the action enables.
  • Use the destructive Button variant on the final action of every hard-to-reverse or irreversible action, with no exception. Cancel stays outline.
  • Make the trigger destructive when it's a standalone button, such as Delete workspace in settings. On a table row, put it in the row's menu as a destructive item instead of a red button on every row.

Don't

  • Ask for confirmation on something users can restore.
  • Ask a yes-or-no question with generic buttons, such as Yes, No or OK.
  • Make a reversible action red, such as Archive or Hide. Nothing is lost, and Undo covers it.
  • Use the destructive colour anywhere else on the page.