Destructive Action
破坏性操作
An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
Live Demo
Actually clickableRecently deleted
12 items to clear
What you just saw:"Delete photo" in a gallery, the red "Erase All Data" at the very bottom of settings, the "Delete" that appears when you swipe a chat list row left — what they share is a required confirmation.
What it actually is
A destructive action is a design pattern rather than a single component. It has three parts: visual de-emphasis (quiet most of the time), confirmation on trigger (a second-confirm dialog), and an escape hatch (an Undo after the deletion).
Anatomy · What it's made of
De-emphasized常态低调
A red text button that does not compete for attention
Confirm Dialog二次确认
States the consequence, never just "Are you sure?"
Impact Text后果说明
"12 photos will be deleted and cannot be recovered"
Undo Escape撤销退路
A Snackbar offering Undo after the deletion
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The action is irreversible or expensive to reverse | Yes |
| A mis-tap is costly (deleting data, deactivating an account, issuing a refund) | Yes |
| The dangerous button appears only rarely on the page | Yes |
| The action is frequent and easy to recover from (drag to reorder, clear a text field) | No |
| Deleting 100 photos in bulk | Depends |
A confirmation dialog on every dangerous action trains people to click OK with their eyes closed, which lowers safety rather than raising it.
The real fix is usually to offer Undo, not to block the user.
Similar Patterns
Don't mix these upDestructive ActionCurrent
破坏性操作
An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
In one line:An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Button
按钮
The most basic clickable element in the interface — the user taps it and one thing happens.
Snackbar
带操作提示条
Looks much like a toast, except it carries one optional action button at the bottom — typically "Undo".
Alert
警示框
A message that has to be taken seriously: something broke, something is at risk, and you need to act on it.
How to tell AI
Three levels of promptAdd the component name and specifics
Add a destructive delete action: a red text button at rest that opens a confirmation dialog stating how many items will be removed, plus a Snackbar with Undo after the deletion completes.
Don't just say this to AI
Bad → BetterDon't say this to AI
Add a red delete button.
Say this instead
Handle the dangerous action with a three-part pattern: a red text button that stays quiet at rest → a confirmation dialog on click that spells out the consequence (not "Are you sure?") → a Snackbar with Undo after it completes.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.