Popconfirm
Overview
A confirmation box component based on Popper, used for lightweight secondary confirmation operations. SPopconfirm combines the Aria PopconfirmCompact (built on the popper primitives) with the popconfirmVariants style recipe (13 slots, 6 sizes × 4 types).
Use it for a quick inline confirm (delete, destructive action) next to the trigger. For a richer blocking confirmation use dialog; for an unobtrusive hint use tooltip.
Usage
Features
- 🧩 Built on
Popper— inherits placement, arrow, portal, dismissable and focus behavior - 🎨 4 types —
type="error"/"success"/"warning"/"info"drive the leading icon and color - 🏷️ Title + description + content —
title/description/contentprops or the matching slots - 🔘 Confirm/cancel —
confirmText/cancelText(localized fromdialog.confirm/dialog.cancel);showCanceldefaults toonlyWarning - 🖼️ Icon toggle —
showIconrenders the type icon;showArrowrenders the popper arrow - 📐 6 sizes — xs–2xl
size; per-slotuioverrides - ♿ Accessible — popup exposes
role="dialog"labelled by the trigger, focus-managed,axe-coreclean in the browser e2e - 🔒 Disabled —
disabledblocks the trigger from opening the popconfirm
Component family
SPopconfirm(styled) — the entry wrapper;popconfirmVariantsrecipe with dynamic slot forwardingPopconfirmCompact(Aria) — the aggregated composite built onPopperRoot/PopperTrigger/PopperPositioner/PopperPopupPopconfirmHeader/PopconfirmContent/PopconfirmFooter(Aria) — layout sectionsPopconfirmTitle/PopconfirmDescription(Aria) — the title/descriptionPopconfirmConfirm/PopconfirmCancel(Aria) — footer<button>s, emitconfirm/cancel
Playground
Basic
100%
API
Aria Layer
17Popconfirm
31 Props10 Emits6 Slots
Props
| Prop | Type | Default | Description |
|---|---|---|---|
class | ClassValue | — | class of popup |
size | ThemeSize | — | Visual size of the component. |
ui | Partial<PopconfirmUi> | — | Per-slot class overrides for the component. |
type | PopconfirmType | — | Type. |
placement | Placement | — | Placement. |
title | string | — | Title text rendered by the component. |
description | string | — | Description text rendered by the component. |
content | string | — | Content. |
showArrow | boolean | true | Whether to show an arrow. |
showIcon | boolean | true | Whether to show an icon. |
confirmText | string | — | The text of the confirm button.
Defaults to the localized `dialog.confirm` message from `ConfigProvider`. |
cancelText | string | — | The text of the cancel button.
Defaults to the localized `dialog.cancel` message from `ConfigProvider`. |
showCancel | boolean | 'onlyWarning' | 'onlyWarning' | Determines whether the cancel button is shown. |
triggerProps | PopconfirmTriggerProps | — | Properties forwarded to the trigger element. |
portalProps | PopperPortalProps | — | Properties forwarded to the portal element. |
positionerProps | PopconfirmPositionerProps | — | Properties forwarded to the positioner element. |
popupProps | PopconfirmPopupProps | — | Properties forwarded to the popup element. |
arrowProps | PopperArrowProps | — | Properties forwarded to the arrow element. |
closeProps | PopconfirmCloseProps | — | Properties forwarded to the close element. |
headerProps | PopconfirmHeaderProps | — | Properties forwarded to the header element. |
titleProps | PopconfirmTitleProps | — | Properties forwarded to the title element. |
descriptionProps | PopconfirmDescriptionProps | — | Properties forwarded to the description element. |
contentProps | PopconfirmContentProps | — | Properties forwarded to the content element. |
footerProps | PopconfirmFooterProps | — | Properties forwarded to the footer element. |
confirmProps | PopconfirmConfirmProps | — | Properties forwarded to the confirm element. |
cancelProps | PopconfirmCancelProps | — | Properties forwarded to the cancel element. |
dir | Direction | — | — |
open | boolean | — | — |
defaultOpen | boolean | — | — |
modal | boolean | — | — |
disabled | boolean | — | — |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:open | boolean, reason: PopperOpenChangeReason | — |
escapeKeyDown | KeyboardEvent | Event handler called when the escape key is down. Can be prevented. |
pointerDownOutside | PointerDownOutsideEvent | Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
focusOutside | FocusOutsideEvent | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
interactOutside | PointerDownOutsideEvent | FocusOutsideEvent | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown`
event happens outside or focus moves outside of it. Can be prevented. |
openAutoFocus | Event | Event handler called when auto-focusing on open. Can be prevented. |
closeAutoFocus | Event | Event handler called when auto-focusing on close. Can be prevented. |
placed | — | — |
confirm | PointerEvent | Emitted when confirm occurs. |
cancel | PointerEvent | Emitted when cancel occurs. |
Slots
| Slot Name | Parameters | Description |
|---|---|---|
default | PopconfirmCompactBaseSlotProps | Custom content for the default slot. |
trigger | PopconfirmCompactBaseSlotProps | Custom content for the trigger slot. |
title | PopconfirmCompactBaseSlotProps | Custom content for the title slot. |
description | PopconfirmCompactBaseSlotProps | Custom content for the description slot. |
footer | PopconfirmCompactBaseSlotProps | Custom content for the footer slot. |
close | PopconfirmCompactBaseSlotProps | Custom content for the close slot. |
PopconfirmAnchor
3 Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
reference | ReferenceElement | — | — |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
PopconfirmArrow
PopconfirmCancel
4 Props1 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | ButtonType | 'button' | The type of the button element. Can be one of 'button', 'submit', or 'reset'. |
disabled | boolean | — | Whether the component is disabled. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
cancel | PointerEvent | Emitted when cancel occurs. |
PopconfirmClose
4 Props1 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | ButtonType | 'button' | The type of the button element. Can be one of 'button', 'submit', or 'reset'. |
disabled | boolean | — | Whether the component is disabled. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
close | PointerEvent | Emitted when close occurs. |
PopconfirmCompact
28 Props10 Emits6 Slots
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | PopconfirmType | — | Type. |
placement | Placement | — | Placement. |
title | string | — | Title text rendered by the component. |
description | string | — | Description text rendered by the component. |
content | string | — | Content. |
showArrow | boolean | true | Whether to show an arrow. |
showIcon | boolean | true | Whether to show an icon. |
confirmText | string | — | The text of the confirm button.
Defaults to the localized `dialog.confirm` message from `ConfigProvider`. |
cancelText | string | — | The text of the cancel button.
Defaults to the localized `dialog.cancel` message from `ConfigProvider`. |
showCancel | boolean | 'onlyWarning' | 'onlyWarning' | Determines whether the cancel button is shown. |
triggerProps | PopconfirmTriggerProps | — | Properties forwarded to the trigger element. |
portalProps | PopperPortalProps | — | Properties forwarded to the portal element. |
positionerProps | PopconfirmPositionerProps | — | Properties forwarded to the positioner element. |
popupProps | PopconfirmPopupProps | — | Properties forwarded to the popup element. |
arrowProps | PopperArrowProps | — | Properties forwarded to the arrow element. |
closeProps | PopconfirmCloseProps | — | Properties forwarded to the close element. |
headerProps | PopconfirmHeaderProps | — | Properties forwarded to the header element. |
titleProps | PopconfirmTitleProps | — | Properties forwarded to the title element. |
descriptionProps | PopconfirmDescriptionProps | — | Properties forwarded to the description element. |
contentProps | PopconfirmContentProps | — | Properties forwarded to the content element. |
footerProps | PopconfirmFooterProps | — | Properties forwarded to the footer element. |
confirmProps | PopconfirmConfirmProps | — | Properties forwarded to the confirm element. |
cancelProps | PopconfirmCancelProps | — | Properties forwarded to the cancel element. |
dir | Direction | — | — |
open | boolean | — | — |
defaultOpen | boolean | — | — |
modal | boolean | — | — |
disabled | boolean | — | — |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:open | boolean, reason: PopperOpenChangeReason | — |
escapeKeyDown | KeyboardEvent | Event handler called when the escape key is down. Can be prevented. |
pointerDownOutside | PointerDownOutsideEvent | Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
focusOutside | FocusOutsideEvent | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
interactOutside | PointerDownOutsideEvent | FocusOutsideEvent | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown`
event happens outside or focus moves outside of it. Can be prevented. |
openAutoFocus | Event | Event handler called when auto-focusing on open. Can be prevented. |
closeAutoFocus | Event | Event handler called when auto-focusing on close. Can be prevented. |
placed | — | — |
confirm | PointerEvent | Emitted when confirm occurs. |
cancel | PointerEvent | Emitted when cancel occurs. |
Slots
| Slot Name | Parameters | Description |
|---|---|---|
default | PopconfirmCompactBaseSlotProps | Custom content for the default slot. |
trigger | PopconfirmCompactBaseSlotProps | Custom content for the trigger slot. |
title | PopconfirmCompactBaseSlotProps | Custom content for the title slot. |
description | PopconfirmCompactBaseSlotProps | Custom content for the description slot. |
footer | PopconfirmCompactBaseSlotProps | Custom content for the footer slot. |
close | PopconfirmCompactBaseSlotProps | Custom content for the close slot. |
PopconfirmConfirm
4 Props1 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | ButtonType | 'button' | The type of the button element. Can be one of 'button', 'submit', or 'reset'. |
disabled | boolean | — | Whether the component is disabled. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
confirm | PointerEvent | Emitted when confirm occurs. |
PopconfirmContent
PopconfirmDescription
PopconfirmFooter
PopconfirmHeader
PopconfirmPopup
PopconfirmPortal
PopconfirmPositioner
23 Props7 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placement | Placement | undefined | The placement of the floating element.
If used, it will override the `side` and `align` props. |
side | Side | 'bottom' | The preferred side of the trigger to render against when open. Will be reversed when collisions occur and
avoidCollisions is enabled. |
sideOffset | number | 0 | The distance in pixels from the trigger. |
sideFlip | boolean | true | Flip to the opposite side when colliding with boundary. |
align | Align | 'center' | The preferred alignment against the trigger. May change when collisions occur. |
alignOffset | number | 0 | An offset in pixels from the `start` or `end` alignment options. |
alignFlip | boolean | true | Flip alignment when colliding with boundary.
May only occur when `prioritizePosition` is true. |
avoidCollisions | boolean | true | When `true`, overrides the side and align preferences to prevent collisions with boundary edges. |
collisionBoundary | Element | (Element | null)[] | null | [ ] | The element used as the collision boundary. By default this is the viewport, though you can provide additional
element(s) to be included in this check. |
collisionPadding | Padding | 0 | The distance in pixels from the boundary edges where collision detection should occur. Accepts a number (same for
all sides), or a partial padding object, for example: { top: 20, left: 20 }. |
arrowPadding | number | 0 | The padding between the arrow and the edges of the content. If your content has border-radius, this will prevent it
from overflowing the corners. |
hideShiftedArrow | boolean | true | When `true`, hides the arrow when it cannot be centered
to the reference element. |
sticky | 'partial' | 'always' | 'partial' | The sticky behavior on the align axis. `partial` will keep the content in the boundary as long as the trigger is at
least partially in the boundary whilst "always" will keep the content in the boundary regardless. |
hideWhenDetached | boolean | false | Whether to hide the content when the trigger becomes fully occluded. |
positionStrategy | 'fixed' | 'absolute' | 'fixed' | The type of CSS position property to use. |
updatePositionStrategy | 'always' | 'optimized' | 'optimized' | Strategy to update the position of the floating element on every animation frame. |
disableUpdateOnLayoutShift | boolean | false | Whether to disable the update position for the content when the layout shifted. |
prioritizePosition | boolean | false | Force content to be position within the viewport. Might overlap the reference element, which may not be desired. |
reference | ReferenceElement | — | The custom element or virtual element that will be set as the reference to position the floating element. If
provided, it will replace the default anchor element. |
trapFocus | boolean | modal | Whether focus is trapped inside the popup while open (Tab cycles within the layer and body
scroll is locked for modal layers). |
disableHoverableContent | boolean | false | When `true`, hovering the popup closes instead of keeping it open (the grace area is disabled,
so leaving the trigger closes the layer immediately). |
onGracePointerExit | (() => void) | — | Callback invoked when the pointer finally leaves the grace area. Lets an upper layer (e.g.
Tooltip) run area-scoped close logic without registering its own second grace area. |
forceMount | boolean | — | Used to force mounting when more control is needed.
Useful when controlling animation with Vue animation libraries. |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
escapeKeyDown | KeyboardEvent | Event handler called when the escape key is down. Can be prevented. |
pointerDownOutside | PointerDownOutsideEvent | Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. |
focusOutside | FocusOutsideEvent | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. |
interactOutside | PointerDownOutsideEvent | FocusOutsideEvent | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown`
event happens outside or focus moves outside of it. Can be prevented. |
openAutoFocus | Event | Event handler called when auto-focusing on open. Can be prevented. |
closeAutoFocus | Event | Event handler called when auto-focusing on close. Can be prevented. |
placed | — | — |
PopconfirmRoot
5 Props1 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
dir | Direction | — | — |
open | boolean | — | — |
defaultOpen | boolean | — | — |
modal | boolean | — | — |
disabled | boolean | — | — |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:open | boolean, reason: PopperOpenChangeReason | — |
PopconfirmTitle
PopconfirmTrigger
14 Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | PopperTriggerType | — | — |
reference | ReferenceElement | — | — |
openDelay | number | — | — |
closeDelay | number | — | — |
skipDelayDuration | number | — | — |
pressOpenDelay | number | — | — |
openOnFocus | boolean | — | — |
focusOpenDelay | number | inherit from `openDelay` | Open delay applied to focus-driven opens. Defaults to `openDelay`; set `0` to open
instantly on focus (Tooltip semantics). |
focusVisibleOnly | boolean | false | When `true`, focus-driven opening only responds to keyboard/programmatic focus
(`:focus-visible`), ignoring pointer-derived focus. |
ariaMode | PopperTriggerAriaMode | 'controls' | How the trigger references its popup for assistive technology.
- `controls`: `aria-expanded` + `aria-controls` (expandable widgets: popover / menu)
- `describedby`: `aria-describedby` while open (tooltip-like descriptions)
- `none`: no popup-reference attributes |
type | ButtonType | 'button' | The type of the button element. Can be one of 'button', 'submit', or 'reset'. |
disabled | boolean | — | Whether the component is disabled. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Notes
Architecture and benchmark differences
PopconfirmCompact composes the popper trigger/positioner/popup with a confirm-style header, content and footer, while every primitive stays style-free and only the UI wrapper injects the popconfirmVariants classes. This mirrors radix-ui/shadcn-ui’s headless split. Ant Design, Element Plus, Mantine and Naive UI ship a single styled popconfirm with title/description/okText/cancelText/onConfirm props; VeanUI additionally exposes per-slot *Props, a size scale, a type color/icon system, and localized action labels.
| Capability | VeanUI | shadcn/ui | Ant Design Popconfirm | Element Plus Popconfirm | Mantine Popconfirm | Naive UI Popconfirm |
|---|---|---|---|---|---|---|
| Built on Popper | ✅ | ✅ | — | — | — | — |
| Aria/styled split | ✅ | ✅ | — | — | — | — |
| Type icon + color | ✅ | — | — | ✅ | — | — |
| Title + description | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Localized confirm/cancel | ✅ | — | — | — | — | — |
| Sizes (6) | ✅ | — | — | — | — | — |
| Placement (popper) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
— = unsupported or a different interaction model.
Cautions
modaldefaults tofalsefor popconfirm (unlike dialog), so it does not block outside interaction or lock body scroll.showCanceldefaults to'onlyWarning'— the cancel button appears only fortype="warning". Pass an explicit boolean to override.confirmText/cancelTextdefault to the localizeddialog.confirm/dialog.cancelmessages; override per instance.- The popup renders
role="dialog"and is labelled by the trigger; provide atitleso the dialog has a clear accessible name. - Confirm/cancel emit
confirm/cancelevents; the popup dismisses after either action (subject to your ownbeforeClosehandling in the parent).
Roadmap
N/A — popconfirm is feature-complete for the current parity set.
FAQ
How do I show a title, description and content?
Pass title/description/content props or the matching slots:
<SPopconfirm
title="Delete item?"
description="This action cannot be undone."
content="Please confirm before continuing."
>
<template #trigger><SButton danger>Delete</SButton></template>
</SPopconfirm>How do I set the type and icon?
Use type (error/success/warning/info) and toggle show-icon:
<SPopconfirm type="warning" title="Heads up">
<template #trigger><SButton>Delete</SButton></template>
</SPopconfirm>How do I customize the action labels?
Set confirm-text/cancel-text, and control the cancel button with show-cancel:
<SPopconfirm confirm-text="Delete" cancel-text="Keep" :show-cancel="true" title="Confirm">
<template #trigger><SButton>Delete</SButton></template>
</SPopconfirm>How do I control the open state?
Bind open with v-model or use defaultOpen:
<SPopconfirm v-model:open="open" title="Confirm">
<template #trigger><SButton>Delete</SButton></template>
</SPopconfirm>How do I disable the trigger?
Set disabled to block opening:
<SPopconfirm disabled title="Confirm">
<template #trigger><SButton>Delete</SButton></template>
</SPopconfirm>