Confirmation Dialog
二次确认框
A dialog that carries state and a place in a multi-step flow, asking "are you sure?" before an action you might regret — unlike a plain modal that just displays information.
Live Demo
Actually clickableWhat you just saw:Tapping "Delete photo" and getting "Delete 3 photos? They will move to Recently Deleted and be cleared after 30 days." with two buttons below: Cancel / Delete.
What it actually is
The value of a confirmation dialog is not interception, it is making the consequences legible. A good one names the specific impact (what gets deleted, whether it can be recovered) instead of a bare "Are you sure?" — the bare version only trains a conditioned reflex to click through.
Anatomy · What it's made of
Title标题
Names the consequence, not "Alert"
Impact影响说明
"3 photos will be deleted"
Cancel取消
Holds focus by default
Confirm确认
A verb, in the danger color
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The action is irreversible and high impact | Yes |
| A mis-tap is expensive (deleting data, closing an account, paying) | Yes |
| A Snackbar undo is offered as an alternative | Yes |
| The action is frequent and easily recoverable (clearing a text field) | No |
| The action could just become an Undo instead of a gate (delete) | Depends |
If every action asks for confirmation, users learn to click the first button whenever a dialog appears.
If you can offer an Undo, do not gate the action — let users be brave and fast, then give them a way to change their mind.
Similar Patterns
Don't mix these upConfirmation DialogCurrent
二次确认框
A dialog that carries state and a place in a multi-step flow, asking "are you sure?" before an action you might regret — unlike a plain modal that just displays information.
Destructive Action
破坏性操作
An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
In one line:A dialog that carries state and a place in a multi-step flow, asking "are you sure?" before an action you might regret — unlike a plain modal that just displays information.
Destructive Action
破坏性操作
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.
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
Before deleting 3 photos, show a confirmation dialog: title "Delete 3 photos?", body "These photos will move to Recently Deleted and be cleared after 30 days.", Cancel holds focus by default, and the confirm button is red.
Don't just say this to AI
Bad → BetterDon't say this to AI
Show a confirmation dialog before deleting.
Say this instead
Show an alertdialog before deleting: title the consequence ("Delete 3 photos?") rather than "Are you sure?", put focus on "Cancel" by default, use a red verb "Delete" on the confirm button, and offer an undo via Snackbar after the action runs.
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.