AlertDialog

A modal dialog that interrupts to confirm or cancel an action.

Import
import * as AlertDialog from '@texuli/primitives/alert-dialog';
Pattern
Alert dialog (WAI-ARIA APG)
Size budget
13.0 KiB gzip for @texuli/primitives/alert-dialog
Reference
packages/primitives/docs/prim-alert-dialog.md

Live demo

Loading the AlertDialog demo…

Anatomy

AlertDialog anatomy: each box holds the parts inside it.
  • AlertDialog.Root
    • AlertDialog.Trigger
    • AlertDialog.Portal
      • AlertDialog.Overlay
      • AlertDialog.Content
        • AlertDialog.Title
        • AlertDialog.Description
        • AlertDialog.Cancel
        • AlertDialog.Action

Behavior checks

tests/behavior/scenarios/alert-dialog.spec.ts runs 8 rows against the AlertDialog scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 8 rows
  1. it is an alertdialog named by its title and described
  2. focus starts on Cancel, the safe choice
  3. Tab stays on Cancel and Delete
  4. a pointer press outside does not dismiss it
  5. Cancel closes it without confirming
  6. Delete confirms once and closes it
  7. Escape closes it and focus returns to the trigger
  8. the page behind it is inert

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 13.0 KiB gzip for @texuli/primitives/alert-dialog (pnpm size).
  • Open-to-focus: p75 at most 50 ms (asserted with TEXULI_PERF=1).