Skip to content

Confirm dialog

Preview Available in release assets

Confirm a consequential action using native dialog and form submission semantics.

Confirm dialog in context

Show code
<p><button class="thin-button" data-variant="danger" data-dialog-open="delete-confirm">Delete project</button></p>
<dialog class="thin-dialog" id="delete-confirm" data-variant="confirm" aria-labelledby="delete-confirm-title" aria-describedby="delete-confirm-description">
  <svg class="thin-icon" aria-hidden="true">
    <use href="/icons/sprite.svg#trash-2">
    </use>
  </svg>
  <div class="thin-stack">
    <h2 id="delete-confirm-title">Delete Northline?</h2>
    <p id="delete-confirm-description">This cannot be undone.</p>
    <form method="dialog" >
      <button class="thin-button" data-variant="secondary" value="cancel" autofocus>Cancel</button>
      <button class="thin-button" data-variant="danger" value="confirm">Delete project</button>
    </form>
  </div>
</dialog>

Anatomy

  • Native dialog
  • Lucide action icon
  • Accessible heading and consequence
  • Cancel and confirm controls

Variants and sizes

  • Destructive
  • Consequential
  • Informational

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Closed
  • Open
  • Cancelled
  • Confirmed

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Cancel and confirm are native buttons with distinct values in a method=dialog form. Escape follows the native cancel path; the dialog helper restores focus to the connected opener.

Accessibility

Put the least destructive action first and autofocus it. State the consequence plainly. Do not use confirmation for reversible routine actions.

Contract
DIALOG
Basis
Native <dialog> and form method="dialog"; no extra composite role
Behavior guarantees
  • Uses native <dialog> and method="dialog"; the trigger helper only coordinates opening, initial focus, and return focus.
  • Rejects ambiguous or unnamed targets and keeps the authored link fallback when modal presentation is unavailable.
  • Focuses an available control on open and restores a connected trigger after close.
Evidence
  • tests/unit/library/alert-confirm.test.ts
  • tests/unit/library/advanced-component-contracts.test.ts

API

Compose dialog.thin-dialog[data-variant=confirm] with labelled content and a form method=dialog. Use data-dialog-open for an external trigger.

Behavior tier: dependency-free

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The initiating action should navigate or submit to a server-rendered confirmation page when enhancement is unavailable; never make a destructive action depend on hidden dialog content alone.

Assets and dependencies

  • /components.css
  • /behaviors.js
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/dialog/style.ts

Composition

Derived from the examples and style specs, not authored.

Composes