Dialog

Wide — for tables and two-column forms

--wide raises the max width for content that genuinely needs it — an embedded table (compact density pairs well here) or a two-column form. Default width is right for confirmations; don't reach for wide by default.

Destructive confirm — no accidental dismiss

Clicking the backdrop closes a dialog by default (light dismiss). For destructive or must-choose flows, opt out with data-dismissible="false" — Esc and the explicit buttons still work, only the accidental backdrop click is disarmed. Pair the destructive action with .bo-btn--danger and lead with the safe choice.

Markup — the canonical dialog recipe

<dialog class="bo-dialog" id="approve-dialog"
        aria-labelledby="approve-title" data-state="closed">
  <form method="dialog">
    <header class="bo-dialog__header">
      <h2 class="bo-dialog__title" id="approve-title">Approve purchase order</h2>
      <button class="bo-btn bo-btn--ghost bo-btn--icon" value="cancel"
              aria-label="Close">✕</button>
    </header>
    <div class="bo-dialog__body">…</div>
    <footer class="bo-dialog__footer">
      <button class="bo-btn bo-btn--secondary" value="cancel">Cancel</button>
      <button class="bo-btn" value="confirm">Approve</button>
    </footer>
  </form>
</dialog>
<button class="bo-btn" data-dialog-trigger="approve-dialog">Approve PO…</button>

<script type="module">
  import { initDialogs } from "@busy-office/ui/js";
  initDialogs(); // once, ever — event delegation; HTMX swaps need no re-init
</script>

Quick reference generated

State attributes: data-dialog-triggerdata-dismissibledata-state

API generated from CSS

• ARIA contract: aria-labelledby pointing at the title is YOUR markup; backdrop, Esc, and focus-return come free from native showModal().
• The Tab focus loop and data-state animation sync are supplied by the behavior.
• Toasts cannot float above an open modal (top layer) — render confirmations inside the dialog.

Maturity generated

Introduced

v0.1.0

CSS floor

Chrome/Edge 117 · Firefox 129 · Safari 17.5

Alignment scored

2026-08-21

Assistive-tech evidence

None recorded

Pin this component's first release with npm i @busy-office/ui@0.1.0. The floor is derived from this component's stylesheet alone — set by @starting-style — so it sits at or below the whole framework's Chrome/Edge 119 · Firefox 129 · Safari 17.5. No assistive-technology runtime result is recorded for any component: it needs a human listening to VoiceOver and NVDA on owner hardware; no gate in this repo can simulate announcement behaviour. What automation covers instead is test:axe across every page at 1440 and 390, and check:forced-colors — see accessibility.

Design-system alignment generated

100% (18/18) — how closely this component follows the design language. Each rule is scored 0-3 against a checkable citation; rules that don't apply leave the denominator. Scored 2026-08-21.