Modal & Dialog
Overlays for confirmations, quick-create forms, and full dialogs. All modals are focus-trapped,
close on Esc, and use role="dialog" with aria-modal="true".
Destructive confirm buttons use coral — confirm labels restate the action.
Live demos
Click to open
Confirmation dialog — destructive
Delete / irreversible action
Delete purchase order?
PO-0042 · Coastal Suppliers Ltd
This will permanently delete PO-0042 and all its order lines. Approved receipts linked to this order will not be deleted. This action cannot be undone.
Confirmation dialog — warning
Reversible but significant action
Reset to draft?
This will unlock the order for editing
Resetting to draft will remove the confirmation number and allow changes. Any receipts already validated will remain unchanged.
Quick-create form
Compact create dialog — new vendor
New vendor
Add a new contact to your vendor list
Full form modal
Edit purchase order — large dialog
Edit Purchase Order
PO-0042 · Created 12 Apr 2026
Behavior reference
| Behavior | Rule | Implementation |
|---|---|---|
| Open animation | Fade + scale up from 97% → 100% | CSS transition on .is-open |
| Close on Esc | Always | keydown listener, remove .is-open |
| Close on backdrop | For non-destructive forms only | Click on .modal-backdrop, not .modal |
| Focus trap | Tab cycles within modal | Query all focusable, wrap at boundary |
| Return focus | On close, return to trigger element | Store lastFocus before open |
| Scroll lock | Body scroll locked while open | overflow: hidden on body |
| Destructive label | Button must restate the action | "Delete purchase order" not "Confirm" |