Are you sure? Inline.

API reference

Constructor & usage

Persistent binding — new Popconfirm(target, options) binds to an element (or the first match of a selector) and intercepts its clicks until destroy(). Binding an already-bound element destroys the previous instance first. Without a DOM, or when the target can't be resolved, the constructor returns a shared inert instance whose whole API is a harmless no-op. Popconfirm.create(target, options) is the same thing without new.

const pc = new Popconfirm('#delete-btn', {
  message: 'Delete this file?',
  danger: true,
  onConfirm: (el) => {},   // after OK; the original click also proceeds
  onCancel: () => {}
})
pc.show(); pc.hide(); pc.destroy()   // destroy() unbinds the interceptor

One-shot promise — Popconfirm.ask(target, opts) anchors a confirm to any element and returns a Promise<boolean>. opts may be a plain string, used as the message.

const ok = await Popconfirm.ask(el /* or selector */, 'Delete this file?')
if (ok) remove()

Declarative — elements with a data-vpc attribute are auto-bound at load; see Declarative init.

Options

Every option works for the constructor, Popconfirm.ask(), and (where listed below) the data-vpc-* attributes. Change a default for every popconfirm via Popconfirm.defaults. Defaults below are quoted from the source's defaults object.

Instance methods

All three return the instance, so they chain. Instances also expose el (the bound trigger element) and opts (the merged options).

Statics & helpers

Popconfirm.ask promise semantics. The promise never rejects. It resolves true only when the OK button is activated. It resolves false for every dismissal: the Cancel button, Escape, a pointer-down outside the panel, or another popconfirm opening (only one is open at a time — the previous one settles as a cancel). Without a DOM (SSR) or when the target can't be resolved, it resolves false immediately — the safe answer to "are you sure?" — via a thenable fallback even where Promise itself is missing. There is no built-in async/pending state: the panel closes as soon as a button is pressed.

Events & callbacks

Popconfirm's eventing is the two callback options; it dispatches no DOM CustomEvents of its own. (The only synthetic event it fires is the re-dispatched click on the trigger after a confirmed interception — your existing click/submit handlers receive it exactly once.)

Declarative init

Any element with a data-vpc attribute is bound automatically at load (on DOMContentLoaded, or immediately if the script loads later). For markup added afterwards, call Popconfirm.autoInit(root) — already-bound elements are skipped. Boolean attributes are true for any value except the literal strings "false" and "0"; a bare attribute (e.g. data-vpc-danger) counts as true.

<button data-vpc="Publish now?"
        data-vpc-title="Publish"
        data-vpc-ok="Publish" data-vpc-cancel="Not yet"
        data-vpc-danger="false"
        data-vpc-placement="bottom"
        data-vpc-icon="false">Publish</button>

Theming

With theme: 'auto' (the default), the panel follows the page using the family's resolution order: <html data-theme> / data-bs-theme attribute → a .dark / .light class on <html> → prefers-color-scheme — re-resolved live while a panel is open (attribute changes and OS scheme flips are watched). Pin per call with theme: 'light' | 'dark'. When the VC core is loaded its shared theme engine is used instead, and VC.config({ accent: '#b45309' }) themes popconfirms together with every other family component.

All colors are CSS custom properties defined on .vpc (light) and .vpc[data-theme=dark] (dark). The injected stylesheet is inserted before your page's own CSS, so a plain .vpc { --vpc-accent: … } rule in your stylesheet wins the cascade.

CSS isolation (salting). Panels render as class="vpc vc1" and every structural rule ships salted (.vpc.vc1 .vpc-btn { … }), so host-page design systems can't override the layout — while --vpc-* variable definitions stay deliberately unsalted so your overrides keep working. Set a custom token with Popconfirm.salt = 'acme' (sanitized to word characters and dashes), or disable salting with Popconfirm.salt = false — in both cases before the first popconfirm, since the stylesheet is injected once.

Headless. Popconfirm.defaults.styles = false (or per-call styles: false) never injects CSS. You keep the full behavior — interception, focus management, ARIA, positioning — and style the markup contract below from your own CSS. Popconfirm.css (a string, rendered with the current salt) is available as a starting point, as is the dist/popconfirm.css file mentioned in the source.

.vpc.vpc-danger[data-theme="dark"][data-placement="top"].vpc-open
  .vpc-arrow
  .vpc-body
    .vpc-icon                     ← unless icon: false
    .vpc-content
      .vpc-title                  ← only when `title` given
      .vpc-msg
  .vpc-actions
    .vpc-btn.vpc-cancel
    .vpc-btn.vpc-ok

Accessibility

The panel is a role="alertdialog" whose accessible name is the message — or the title when one is given, with the message wired up via aria-describedby (aria-labelledby points at the title or message element accordingly). The arrow is aria-hidden. Bound triggers get aria-haspopup="dialog" and a live aria-expanded, plus aria-controls pointing at the panel while it is open.

Focus opens on Cancel — the safe default, so a reflexive Enter dismisses instead of confirming. On close, focus returns to the trigger, but only when it was still inside the panel (or lost entirely) — never stolen from something else the user clicked. Reduced motion is respected (prefers-reduced-motion disables the transitions). Inside an open <dialog>, the panel renders into the dialog so it shares the top layer.