Lily Design System™

Popconfirm Dialog

A popconfirm dialog is a non-modal popover dialog with confirm and cancel buttons. It is anchored to a trigger element and uses role="alertdialog" to announce the urgent confirmation prompt.

Use it for inline confirmations such as delete-item, discard-changes, or remove-permission where a full modal dialog would be too disruptive.

Example

PopconfirmDialog
Show demo markup 
<div class="popconfirm-dialog" aria-label="a popover dialog with confirm and cancel buttons">PopconfirmDialog</div>
Usage example 
<script lang="ts">
  import PopconfirmDialog from './PopconfirmDialog.svelte';

  let open = $state(false);

  function confirm() { /* … */ open = false; }
  function cancel() { open = false; }
</script>

<PopconfirmDialog
  open={open}
  title="Delete this item?"
  description="This action cannot be undone."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  onconfirm={confirm}
  oncancel={cancel}
/>
Show Svelte source 
// In your Svelte component:
import PopconfirmDialog from "lily-design-system-svelte-headless/components/PopconfirmDialog/PopconfirmDialog.svelte";

<PopconfirmDialog label="Dialog" open>
  <!-- dialog content -->
</PopconfirmDialog>

Usage

<PopconfirmDialog
  open={isOpen}
  title="Delete this item?"
  description="This action cannot be undone."
  confirmLabel="Delete"
  cancelLabel="Cancel"
  onconfirm={handleDelete}
  oncancel={handleCancel}
/>

Props

  • open: boolean (default: false) -- whether the dialog is open
  • title: string (required) -- dialog heading
  • description: string (optional) -- body text
  • confirmLabel: string (required) -- confirm button text
  • cancelLabel: string (required) -- cancel button text
  • onconfirm / onConfirm: callback (optional)
  • oncancel / onCancel: callback (optional)
  • ...restProps: any additional HTML attributes

Keyboard Interactions

  • Tab / Shift+Tab: Move focus between cancel and confirm buttons
  • Enter / Space: Activate the focused button
  • Escape: Consumer should close the dialog and call oncancel

ARIA

  • role="alertdialog" announces the urgent confirmation prompt
  • aria-modal="false" reflects that popconfirm is not a modal
  • aria-labelledby references the title id
  • aria-describedby references the description id (when present)
  • The container is hidden when open is false

When to Use

  • Use for inline confirmation of a destructive or non-reversible action.
  • Use when the confirmation context is small and tightly coupled to the trigger.

When Not to Use

  • Do not use for complex confirmations that need extra fields — use a Dialog or AlertDialog.
  • Do not block the entire page — use AlertDialog for fully modal alerts.

Headless

Renders semantic alertdialog markup with no styling. Consumer manages positioning relative to the trigger, focus management, escape handling, and the visual treatment.

Styles

Consumer CSS targets popconfirm-dialog, popconfirm-dialog-title, popconfirm-dialog-description, popconfirm-dialog-cancel, and popconfirm-dialog-confirm. Position the dialog adjacent to the trigger with a callout arrow if appropriate.

Testing

  • Verify the component renders a <div> element with class popconfirm-dialog
  • Verify role="alertdialog" and aria-modal="false" are set
  • Verify the container is hidden when open is false
  • Verify the title renders as an <h2> with class popconfirm-dialog-title and a stable id
  • Verify aria-labelledby references the title id
  • Verify aria-describedby references the description id only when description is provided
  • Verify confirm and cancel buttons render with their labels and type="button"
  • Verify confirm and cancel handlers fire on click

Advice

  • Designers: Place the dialog near the trigger with a clear callout. Keep title short and the description specific.
  • Developers: Move focus to the cancel button (or confirm, depending on policy) when the dialog opens. Restore focus to the trigger when it closes.

Implementation Notes

  • Renders a <div class="popconfirm-dialog"> with role="alertdialog" and aria-modal="false"
  • title is required and renders inside <h2 class="popconfirm-dialog-title">
  • Optional description renders inside <p class="popconfirm-dialog-description">
  • aria-labelledby references the title id
  • aria-describedby references the description id (only when present)
  • confirmLabel and cancelLabel are required
  • Two <button type="button"> elements: popconfirm-dialog-cancel and popconfirm-dialog-confirm
  • The container's hidden attribute reflects the open prop
  • Consumer is responsible for anchoring the dialog near its trigger and managing focus

Related components

  • dialog — a modal or non-modal dialog window
  • alert-dialog — a modal dialog for urgent messages requiring user acknowledgment
  • popover — a floating content box anchored to a trigger element

References

  • WAI-ARIA Alert Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
  • Ant Design Popconfirm: https://ant.design/components/popconfirm

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: popconfirm-dialog
  • PascalCase: PopconfirmDialog
  • Description: a popover dialog with confirm and cancel buttons
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <div>
  • CSS class: .popconfirm-dialog
  • Interactive: yes

ARIA

  • role="alertdialog"
  • aria-modal="false"
  • aria-labelledby references title id
  • aria-describedby references description id (only when description present)

Keyboard

  • Tab / Shift+Tab: Move focus between buttons
  • Enter / Space: Activate focused button
  • Escape: Consumer closes and triggers cancel

Props

  • open: boolean (default: false)
  • title: string (REQUIRED)
  • description: string (optional)
  • confirmLabel: string (REQUIRED)
  • cancelLabel: string (REQUIRED)
  • onconfirm / onConfirm: callback (optional)
  • oncancel / onCancel: callback (optional)
  • ...restProps: any additional HTML attributes