ComponentsDialog

overlaystexulinot agent-emittableapp

Dialog

dialog

Modal dialog with title, optional description, body and footer.

Live examples

Basic dialog

Basic dialog

Loading demo…

Props

Public props for Dialog
NameKindRequiredDefaultDescription
openbooleannofalse—
titlestringyes—Accessible dialog title
descriptionstringno——
sizeenum (sm, md, lg, xl)no"md"—
triggerslotno—Trigger snippet receiving { props }
footerslotno——
childrenslotno——
hideClosebooleannofalse—
closeLabelstringno"Close"—
onOpenChangeeventno——
classstringno——

Keyboard

Keyboard behavior for Dialog
KeyAction
EscapeTitle is required; Escape dismisses unless prevented

Accessibility

  • Focus moves into the dialog and returns on close
  • Title is required; Escape dismisses unless prevented

Evidence for dialog

Latest committed gates for dialog (as of 2026-10-23). Static snapshot — not live CI.

Behavior

checkedscenario dialog

14 checks

Rows in tests/behavior/scenarios/dialog.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium, WebKit and the Pixel 7.

Size (gzip)

@texuli/primitives/dialog · measured 11.3 KiB · budget 12.0 KiB

Measured gzip from docs/quality/perf-primitives.md (2026-10-23).

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Confirm multi-step flows
  • Show focused detail without leaving the page

Don’t use when

Prefer another component

  • A destructive confirm that must trap attention (use alert-dialog)
  • Non-modal hints (use popover or tooltip)