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.

Know first

Popover Modal

⚠Delete this record?

CancelConfirm

Delete

Quick checkChoose the best answer

Archiving a project is reversible but immediately affects the team view. What confirmation fits?

Use a Popconfirm near the trigger, explaining impact with Archive and CancelOpen a full Modal with many settings for every archiveSkip confirmation because it can be restored

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
Discard a small local change
Confirm a reversible table action
Ask a short yes-or-no question in context

When NOT to use it

Confirm a high-risk action with too little explanation
Use it for a form or several decisions
Place it where the triggering control may move away
Ask for confirmation on harmless, easily reversible actions

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

Remove

For lightweight, recoverable actions where confirmation can prevent mistakes, such as removing a member

Warning

⚠Clear all inputs?

CancelClear

Clear

When an action could accidentally clear entered content

Danger

⚠Delete this record?

CancelDelete

Delete

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