Popconfirm

A confirm popover anchored to a trigger. It is not a modal: no mask by default, and the panel uses the light Dropdown surface. In Chinese this component is 確認浮層.

The panel z-index is 4000, the same as Tooltip and Dropdown. Each nested overlay adds 10. OK and Cancel are 34px tall.

Demos

Basic

Click the trigger to toggle. OK emits confirm and closes. Cancel, Escape, and an outside click emit cancel with { reason }. Toggling the trigger does not emit cancel.

Save draft

<gk-popconfirm title="Save this draft?" content="You can keep editing later.">
  <gk-button>Save draft</gk-button>
</gk-popconfirm>

Placements

top, bottom, left, right, plus -start / -end. The panel flips when it would leave the viewport.

TopBottomLeftRight

<gk-popconfirm placement="top" title="Above">...</gk-popconfirm>
<gk-popconfirm placement="bottom" title="Below">...</gk-popconfirm>
<gk-popconfirm placement="left" title="Left">...</gk-popconfirm>
<gk-popconfirm placement="right" title="Right">...</gk-popconfirm>

Warning and delete

warning and error use a danger OK button and an icon. error is an alertdialog and moves focus to Cancel.

ArchiveDelete

<gk-popconfirm type="error" title="Delete this?" content="This cannot be undone." ok-text="Delete">
  <gk-button variant="danger">Delete</gk-button>
</gk-popconfirm>

Custom texts

Empty ok-text / cancel-text follow the document language: OK / Cancel, or 確定 / 取消.

Publish

<gk-popconfirm title="Publish?" ok-text="Publish" cancel-text="Not now">
  <gk-button>Publish</gk-button>
</gk-popconfirm>

Icon trigger

The trigger can be an icon button. Keep the hit target at least 34px.

···

<gk-popconfirm type="warning" title="Archive this file?" content="It stays available in Archive.">
  <gk-button variant="secondary" aria-label="Archive">···</gk-button>
</gk-popconfirm>

No cancel

show-cancel="false" leaves only OK. Outside click and Escape still dismiss.

Mark read

<gk-popconfirm show-cancel="false" title="Mark as read?">
  <gk-button variant="secondary">Mark read</gk-button>
</gk-popconfirm>

Arrow off

show-arrow defaults to true. Set show-arrow="false" to hide the 8px arrow.

No arrow

<gk-popconfirm show-arrow="false" title="No arrow" content="The panel still flips at the viewport edge.">
  <gk-button variant="secondary">No arrow</gk-button>
</gk-popconfirm>

Controlled

open and show are aliases. update:open and update:show carry the next boolean. mask defaults to false; set it only when you want the 40% dim layer and a scroll lock. Async loading on OK is a follow-up — compose it in the app.

LeaveOpen from outside

<gk-popconfirm
  :open="open"
  title="Leave this page?"
  content="Unsaved notes will be kept locally."
  @update:open="onOpen"
>
  <gk-button>Leave</gk-button>
</gk-popconfirm>

Alpine

<gk-popconfirm title="Save this draft?" content="You can keep editing later.">
  <button type="button">Save draft</button>
</gk-popconfirm>

API

Props

Prop	Type	Default
open / show	boolean	false
title	string	''
content / message	string	''
placement	Tooltip placements	'top'
trigger	'click' | 'manual'	'click'
type	'default' | 'warning' | 'error'	'default'
ok-text	string	'' (OK / 確定)
cancel-text	string	'' (Cancel / 取消)
show-cancel	boolean	true
disabled	boolean	false
show-arrow	boolean	true
mask	boolean	false

v1 opens on click. trigger="manual" leaves opening to open / show. Hover does not open a confirm.

Slots

Name	Description
default	Trigger
title	Title
content	Supporting copy
footer / action	Replaces the default OK and Cancel buttons

Events

Name	Detail
update:open / update:show	Next boolean
open / close	—
confirm	OK clicked. The panel then closes.
cancel	{ reason: 'cancel' | 'outside' | 'escape' }

CSS parts

trigger, panel, arrow, icon, title, content, footer, ok, cancel, mask.

Accessibility

• The panel is role="dialog". type="error" uses role="alertdialog".
• aria-modal is true only when mask is set.
• The title and content are referenced with aria-labelledby and aria-describedby.
• The trigger gets aria-haspopup="dialog" and aria-expanded.
• Default confirms focus OK. Warning and error focus Cancel when it is shown.
• Tab cycles inside the panel. Escape closes only the topmost overlay and restores focus to the trigger.