Skip to content

Alert dialog

Preview Available in release assets

Require acknowledgement of an urgent message with the native dialog top layer and focus model.

Alert dialog in context

Show code
<dialog class="thin-dialog" id="session-alert" data-variant="alert" aria-labelledby="session-alert-title" aria-describedby="session-alert-description">
  <svg class="thin-icon" aria-hidden="true">
    <use href="/icons/sprite.svg#triangle-alert">
    </use>
  </svg>
  <div class="thin-stack">
    <h2 id="session-alert-title">Session expired</h2>
    <p id="session-alert-description">Sign in again to continue.</p>
    <form method="dialog">
      <button class="thin-button" autofocus>Understood</button>
    </form>
  </div>
</dialog>

Anatomy

  • Native dialog
  • Lucide warning icon
  • Accessible heading and description
  • Acknowledgement form

Variants and sizes

  • Urgent alert
  • Session or system interruption

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
  • Acknowledged

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Open through data-dialog-open or showModal(). Native Escape and form method=dialog close paths remain canonical.

Accessibility

Name and describe the dialog with aria-labelledby and aria-describedby. Autofocus the safest acknowledgement control only when the modal opens.

Contract
ALERTDIALOG · APG pattern
Basis
APG Alertdialog on a native dialog host
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=alert] with a labelled heading, description, Lucide icon, and form method=dialog.

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

Keep urgent server feedback in-flow or navigate to a dedicated acknowledgement page when JavaScript and native dialog presentation are unavailable.

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