Popconfirm
You might say
On delete, ask 'Are you sure?' next to the button instead of opening a big dialog.
Ask for confirmation next to the action that caused itA popconfirm is a small confirmation panel anchored to a button or link. It works for a simple, local action with a short explanation. Use a Modal when the risk is high, the explanation is longer, or more information must be entered.
You can say this to an AI Agent
Use a Popconfirm beside project Archive. Name the project and state that the team will no longer see it by default, with Cancel. Test cancel and confirm: cancel must not change data; confirm must update the list and leave a recovery path.
When to use it
- Remove one item⚠ Delete this record?DeleteCancelConfirm
- Discard a small local changeConfirm deletion?CancelConfirm
- Confirm a reversible table actionRemove Alex Chen from the team?RemoveCancelConfirm
- Ask a short yes-or-no question in contextClear all inputs?ClearCancelClear
When NOT to use it
- Confirm a high-risk action with too little explanation⚠ Delete all 1,024 records? This can’t be undone!Delete allCancelDelete permanently
- Use it for a form or several decisionsDeleting this project permanently removes its files, members, and settings. Make sure important data is backed up.CancelDelete
- Place it where the triggering control may move away💡 Drag to reorderHover over meCancelGot it
- Ask for confirmation on harmless, easily reversible actionsConfirm deletion?ConfirmConfirm one more time?Confirm
Anatomy
⚠Delete this record?
CancelConfirm
Delete
A small, unmasked card positioned beside its trigger button
Use a one-sentence question, often paired with a ⚠ icon
Offer Confirm and Cancel; make the confirmation label describe the consequence
It opens on click, and its arrow points to the trigger.
Variants
Default
Remove this member from the team?
CancelConfirm
For lightweight, recoverable actions where confirmation can prevent mistakes, such as removing a member
Warning
⚠Clear all inputs?
CancelClear
When an action could accidentally clear entered content
Danger
⚠Delete this record?
CancelDelete
For deletion, use a red confirmation button to emphasize the consequence
Typical use cases
Remove tag
⚠Delete this record?
CancelDelete
📄 Home page revision.fig
2 hours ago
Delete
Delete row
Remove Alex Chen from the team?
CancelConfirm
Alex Chen · Product Manager
Remove
Discard draft
⚠Clear all inputs?
CancelClear
Clear
Leave a group
Unpublish this article? It will return to draft status.
CancelConfirm
📝 Summer Activity Plan
Published
Unpublish
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Quick check