Popconfirm
Shows a confirmation bubble next to the trigger element, commonly used before destructive actions like deletion. Built on the floating positioning engine: 12 placements + overflow auto-flip + pointing arrow + fixed positioning (never clipped by containers).
Basic usage
Click the trigger to open the bubble; OK / the cancel button / Esc / clicking outside all close it. oas-ok and oas-cancel (dispatched only by the cancel button) carry detail: { source, event }; closing via Esc / outside click does not dispatch oas-cancel — its source is available as the reason of oas-open-change.
Basic usage
Controlled visibility
The open attribute is controlled; visibility changes emit oas-open-change whose detail.reason tells the source (trigger / ok / cancel / esc / outside / api).
Controlled visibility (oas-open-change)
Async confirmation
Listen to oas-ok, set ok-loading synchronously (the OK button spins and auto-close is held), then remove the attribute and close after the request finishes. While loading, clicking OK emits nothing (no double submits).
Async confirmation (ok-loading)
Semantic themes
theme has three states: default / warning / danger — driving the default icon, icon color and the OK button tone, one step for dangerous deletes.
Semantic themes
Texts and icon
ok-text / cancel-text customize button labels (empty falls back to locale); description is the secondary line (attribute and slot="description" dual channel); hide-icon removes the icon; the icon slot replaces the default one; show-cancel="false" gives a single-button confirm.
Texts and icon
Twelve placements
placement supports 12 directions; when space runs out the bubble flips along the main axis (disable via auto-adjust-overflow="false"). Legacy position values remain compatible.
Twelve placements
Triggers and disabled
trigger accepts a space-separated multi-select (click / hover / focus / contextmenu / manual, default click); disabled suppresses the bubble (visually dimmed). Keyboard friendly: focus moves into the bubble on open (OK button first), returns to the trigger on close, and Esc closes the topmost bubble.
Triggers and disabled
Custom actions
Content in slot="actions" replaces the built-in button row; combine with the show() / hide() methods to express confirm semantics (oas-open-change reports reason: api).
Custom actions (actions slot)
Virtual anchor
virtual mode anchors the bubble at coordinates (virtual-x / virtual-y) or an element (virtual-anchor); opening and closing are fully host-controlled (outside clicks are ignored).
Virtual anchor
Virtual coordinates (virtual-x / virtual-y)
Positioning details (arrow / auto-adjust-overflow / position / width)
arrow="false" hides the arrow; auto-adjust-overflow="false" disables the auto-flip/shift when space runs short; the legacy position attribute (four cardinal directions) remains compatible; width fixes the panel width.
Positioning details
Event binding (onoas-*)
Bubble events can be bound directly in the template via onoas-* attributes (onoas-ok / onoas-cancel), equivalent to an @oas-ok listener in the host framework.
Event feedback
API
oas-popconfirm
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
arrow | Whether to show the arrow (default true; arrow="false" hides it, the element and ::part(arrow) are kept) | string | true |
auto-adjust-overflow | Viewport-edge auto flip and avoidance (default true; "false" disables it, keeping the declared placement, which may overflow the viewport) | string | true |
cancel-text | Cancel button text; falls back to locale popconfirm.cancel | string | — |
description | Description text (secondary line under the title, smaller and dimmed; the "description" slot wins for rich content) | string | — |
disabled | Fully disabled: every trigger path is gated and no bubble shows, the host is dimmed with aria-disabled synced (both the disabled attribute and config-provider injection take effect) | boolean | — |
hide-icon | Hide the leading semantic icon (shown by default, switching with theme) | boolean | — |
ok-loading | OK button loading state: the original label keeps its space while a spinner centers over it (aria-busy); clicks are blocked to prevent duplicate submits; setting it synchronously inside the oas-ok listener prevents the auto-close | boolean | — |
ok-text | OK button text; falls back to locale popconfirm.ok | string | — |
open | Whether the bubble is shown | boolean | — |
placement | Bubble placement: 12 directions top/bottom/left/right with -start/-end (default top); falls back to the legacy position (4 base directions) when absent | string | — |
position | Bubble position | string | — |
show-cancel | Whether to show the cancel button (default true; show-cancel="false" gives a single-button confirm) | string | true |
theme | Semantic theme: default / warning / danger — panel tint background and border, icon and OK button color ramp linked (tokens include dark variants) | string | default |
title | Confirmation text (rendered into the visible title region; absorbed from the host on read so no native hover tooltip remains; pass an empty string to clear); use the "title" slot for rich content | string | — |
trigger | Trigger modes: click (default) / hover / focus / contextmenu / manual, space-separated for multiple; with hover, touch devices degrade to tap-to-toggle automatically | string | click |
virtual | Virtual trigger mode: no anchor element, open fully controlled externally, positioned via virtual-anchor or virtual-x/virtual-y; no outside-click dismissal registered | boolean | — |
virtual-anchor | Virtual anchor element selector (effective when virtual-x/virtual-y are unset) | — | — |
virtual-x | Virtual anchor x (viewport coordinate, px) | — | — |
virtual-y | Virtual anchor y (viewport coordinate, px) | — | — |
width | Panel width: a number (px) / "trigger" (same width as the trigger) / any CSS value; default min-width 200px | string | — |
Events
| Event | Description |
|---|---|
oas-cancel | Dispatched only when the Cancel button is clicked (Esc / outside click go through the oas-open-change reason), detail: { source: this, event: e } |
oas-ok | Clicked "OK"; the bubble then collapses automatically, detail: { source: this, event: e } |
oas-open-change | Emitted when the open state changes, detail: { open, reason } (reason: ok/cancel/esc/outside/trigger/api) |
Slots
| Name | Description |
|---|---|
| default | Popconfirm body content |
actions | Action buttons area (replaces the default confirm / cancel buttons) |
description | Description text |
icon | Custom icon (replaces the built-in one: a warning triangle for default / warning themes, a circled exclamation for danger) |
title | Rich title content slot; overrides the title attribute text when present |
CSS Variables
| CSS Variable | Default |
|---|---|
--oas-glass-blur | none |
--oas-glass-ring | transparent |
--oas-origin-x | center |
--oas-origin-y | center |
--oas-popconfirm-arrow-height | 12px |
--oas-popconfirm-arrow-radius | 0 |
--oas-popconfirm-arrow-width | 12px |
Methods
| Method | Description |
|---|---|
show() | Opens the bubble (equivalent to the open attribute; oas-open-change reports reason: api) |
hide() | Closes the bubble (equivalent to removing open; oas-open-change reports reason: api) |
restoreFocus() | Restores focus to the trigger element |
The panel uses role="alertdialog"; focus moves into the bubble on open (OK button first) and returns to the trigger on close; the trigger keeps aria-expanded / aria-controls in sync; Esc closes the topmost bubble (layer by layer when nested).