CANON · Modals
A modal interrupts the user. Every modal should justify the interruption. Most shouldn't exist.
When to use a modal
| Use modal |
Don't use modal |
| Confirming a destructive action with no undo |
Confirming a reversible action (use Undo toast) |
| Focused task that requires full attention (image edit, payment) |
Editing a field (inline edit) |
| Error or warning blocking progress |
Informational messages (toast/banner) |
| Critical form that must complete before continuing |
Forms that can live on a page |
| Collecting user input for current flow only |
Secondary workflows (new tab/page) |
Undo beats confirm. A toast with "Item deleted. [Undo]" is almost always better than "Are you sure?"
Modal vs drawer vs popover vs sheet
| Pattern |
Overlay |
Blocks page |
Anchored |
Use |
| Modal dialog |
Full |
Yes |
Center |
Critical decisions, focused tasks |
| Drawer (side) |
Partial |
Yes |
Edge |
Settings panels, filters, nav |
| Popover |
None |
No |
Element |
Supplemental info, small forms |
| Bottom sheet (mobile) |
Partial |
Yes |
Bottom |
Mobile primary pattern for drawers |
| Fullscreen sheet (mobile) |
Full |
Yes |
Full |
Complex mobile tasks |
Use the <dialog> element
Native <dialog> handles focus trap, ESC, backdrop, and scroll lock for free. Stop reinventing it.
<dialog id="confirm-delete">
<h2>Delete project?</h2>
<p>This permanently removes the project and all 47 files.</p>
<div class="actions">
<button value="cancel">Cancel</button>
<button value="confirm" class="destructive">Delete project</button>
</div>
</dialog>
<script>
const dialog = document.getElementById('confirm-delete');
dialog.showModal(); // Modal with backdrop + focus trap
// dialog.show(); // Non-modal
</script>
If you must build without <dialog>, the requirements below are non-negotiable.
Required behaviors
- Focus moves into the dialog on open. The first focusable element, or the most useful (e.g., the primary action).
- Focus trapped inside. Tab and Shift+Tab cycle within. Nothing outside is reachable.
- Focus returns to trigger on close. The element that opened the modal gets focus back.
- Escape closes. Unless explicitly forbidden (rare).
- Click outside closes. For non-critical modals. For critical confirmations, require explicit button press.
- Scroll locked on body. No scrolling behind the modal.
overflow: hidden on <html>, not <body> — that loses scroll position on mobile Safari.
- Backdrop visible. 40–60% opacity black or tinted dark with blur for modern feel.
role="dialog" or role="alertdialog". Alertdialog for critical confirmations.aria-labelledby pointing to the heading. Or aria-label if no visible heading.
Sizing
| Size |
Width |
Use |
| Small |
320–400px |
Confirmations, quick messages |
| Medium |
480–560px |
Default. Forms, standard content |
| Large |
640–800px |
Complex forms, settings |
| XL |
900–1120px |
Data-heavy edit screens |
| Fullscreen |
100% |
Mobile, image editors, complex flows |
Max height: min(90vh, 720px). Content scrolls inside the modal, header and footer stay sticky.
Padding: 24px on medium+ desktop, 16px on mobile.
Mobile — bottom sheet by default
On mobile, centered modals are awkward. Bottom sheets feel native.
- Slide from bottom with 250–300ms ease-out.
- Drag handle at top (4×40px pill).
- Swipe down to dismiss.
- Fills 60–90% of viewport height, scrolls inside.
Reserve centered modals on mobile for true alert dialogs.
Stacking modals — avoid, but if you must
At most 2 modals stacked. Beyond that, the flow is wrong.
- Second modal has higher z-index.
- Closing the second restores focus to the first.
- Escape closes one at a time, not all.
- If stacking happens often, redesign the flow.
Animation
| Phase |
Duration |
Easing |
| Enter |
200–250ms |
ease-out |
| Exit |
150–200ms |
ease-in |
| Backdrop fade |
same as modal |
same |
Avoid scale animations beyond 0.96–1.0 (too bouncy reads childish).
Honor prefers-reduced-motion with opacity-only fallback.
Copy
- Title is a statement, not a question. "Delete project" or "Deleting project" beats "Are you sure?"
- Body explains consequences, specific. "This permanently removes the project and all 47 files" beats "This cannot be undone."
- Primary button names the action. "Delete project" not "Yes". "Save changes" not "OK".
- Secondary button is usually "Cancel". Plain. Not "No" (pairs poorly with verb-primaries).
Destructive confirmations — the extra step
Type-to-confirm is appropriate for truly irreversible actions.
Type "delete" to confirm.
[______________]
[Delete permanently]
Reserve for: account deletion, workspace deletion, database drops. Overused, it becomes ignored.
Anti-patterns
| Anti-pattern |
Why it fails |
| Confirmation modal for every save |
Alert fatigue, users stop reading |
| "Are you sure?" as the title |
Not informative |
| "OK" / "Cancel" as button labels |
Violates canon-ux-writing; buttons should be verbs |
| Modal without focus trap |
Keyboard users escape into the background |
| Modal without Escape close |
Keyboard users trapped |
| Focus not returned to trigger on close |
Disorienting |
| Autofocus on destructive primary button |
Accidental confirmation on Enter |
| Three or more modals stacked |
Flow is wrong |
| Modal for a settings form that fits on a page |
Wasted interruption |
| No backdrop click-to-close on non-critical modals |
Forces explicit close |
| Backdrop click closes critical destructive modal |
Accidental dismissal = accidental action (wait, reverse this — backdrop close on destructive is actually risky. Require explicit Cancel.) |
Focus-on-open strategy
| Modal type |
Autofocus |
| Form modal |
First input |
| Confirmation (safe) |
Primary button |
| Confirmation (destructive) |
Cancel button — not the destructive action |
| Alert (info only) |
Primary / OK button |
| Empty modal / message |
Close button |
Decision tree
Does the user need to make a decision that blocks everything else?
├─ No → Don't use a modal (use toast, banner, inline, or new page)
└─ Yes →
Is the action reversible?
├─ Yes → Prefer Undo toast over confirmation
└─ No → Proceed with modal
Is this a critical destructive action?
├─ Yes → role="alertdialog", default focus on Cancel, require explicit confirm
└─ No → role="dialog", default focus on primary or first input
Audit checklist
Sources
- WAI-ARIA Authoring Practices · Dialog (Modal), Alert Dialog
- WCAG 2.2 · 2.1.2 No Keyboard Trap, 2.4.3 Focus Order, 1.3.1 Info and Relationships
- HTML Living Standard · The
<dialog> element
- Apple HIG · Sheets, Alerts
- Material Design 3 · Dialog
- Refactoring UI · "Use fewer borders" (applied to modal chrome)
1---2name: canon-modals3description: Use when designing, auditing, or refactoring modal dialogs, alert dialogs, confirmation dialogs, drawers, popovers, sheets, or any overlay pattern. Covers when to use a modal vs page vs inline, focus trap, escape behavior, scroll locking, sizing, the dialog element, and modal stacking. Trigger when the user mentions modal, dialog, popup, drawer, sheet, overlay, or confirm.4---56# CANON · Modals78A modal interrupts the user. Every modal should justify the interruption. Most shouldn't exist.910## When to use a modal1112| Use modal | Don't use modal |13|---|---|14| Confirming a destructive action with no undo | Confirming a reversible action (use Undo toast) |15| Focused task that requires full attention (image edit, payment) | Editing a field (inline edit) |16| Error or warning blocking progress | Informational messages (toast/banner) |17| Critical form that must complete before continuing | Forms that can live on a page |18| Collecting user input for current flow only | Secondary workflows (new tab/page) |1920**Undo beats confirm.** A toast with "Item deleted. [Undo]" is almost always better than "Are you sure?"2122## Modal vs drawer vs popover vs sheet2324| Pattern | Overlay | Blocks page | Anchored | Use |25|---|---|---|---|---|26| Modal dialog | Full | Yes | Center | Critical decisions, focused tasks |27| Drawer (side) | Partial | Yes | Edge | Settings panels, filters, nav |28| Popover | None | No | Element | Supplemental info, small forms |29| Bottom sheet (mobile) | Partial | Yes | Bottom | Mobile primary pattern for drawers |30| Fullscreen sheet (mobile) | Full | Yes | Full | Complex mobile tasks |3132## Use the `<dialog>` element3334Native `<dialog>` handles focus trap, ESC, backdrop, and scroll lock for free. Stop reinventing it.3536```html37<dialog id="confirm-delete">38 <h2>Delete project?</h2>39 <p>This permanently removes the project and all 47 files.</p>40 <div class="actions">41 <button value="cancel">Cancel</button>42 <button value="confirm" class="destructive">Delete project</button>43 </div>44</dialog>4546<script>47 const dialog = document.getElementById('confirm-delete');48 dialog.showModal(); // Modal with backdrop + focus trap49 // dialog.show(); // Non-modal50</script>51```5253If you must build without `<dialog>`, the requirements below are non-negotiable.5455## Required behaviors56571. **Focus moves into the dialog on open.** The first focusable element, or the most useful (e.g., the primary action).582. **Focus trapped inside.** Tab and Shift+Tab cycle within. Nothing outside is reachable.593. **Focus returns to trigger on close.** The element that opened the modal gets focus back.604. **Escape closes.** Unless explicitly forbidden (rare).615. **Click outside closes.** For non-critical modals. For critical confirmations, require explicit button press.626. **Scroll locked on body.** No scrolling behind the modal. `overflow: hidden` on `<html>`, not `<body>` — that loses scroll position on mobile Safari.637. **Backdrop visible.** 40–60% opacity black or tinted dark with blur for modern feel.648. **`role="dialog"` or `role="alertdialog"`.** Alertdialog for critical confirmations.659. **`aria-labelledby` pointing to the heading.** Or `aria-label` if no visible heading.6667## Sizing6869| Size | Width | Use |70|---|---|---|71| Small | 320–400px | Confirmations, quick messages |72| Medium | 480–560px | **Default.** Forms, standard content |73| Large | 640–800px | Complex forms, settings |74| XL | 900–1120px | Data-heavy edit screens |75| Fullscreen | 100% | Mobile, image editors, complex flows |7677Max height: `min(90vh, 720px)`. Content scrolls inside the modal, header and footer stay sticky.7879Padding: 24px on medium+ desktop, 16px on mobile.8081## Mobile — bottom sheet by default8283On mobile, centered modals are awkward. Bottom sheets feel native.8485- Slide from bottom with 250–300ms ease-out.86- Drag handle at top (4×40px pill).87- Swipe down to dismiss.88- Fills 60–90% of viewport height, scrolls inside.8990Reserve centered modals on mobile for true alert dialogs.9192## Stacking modals — avoid, but if you must9394At most 2 modals stacked. Beyond that, the flow is wrong.9596- Second modal has higher z-index.97- Closing the second restores focus to the first.98- Escape closes one at a time, not all.99- **If stacking happens often, redesign the flow.**100101## Animation102103| Phase | Duration | Easing |104|---|---|---|105| Enter | 200–250ms | ease-out |106| Exit | 150–200ms | ease-in |107| Backdrop fade | same as modal | same |108109Avoid scale animations beyond 0.96–1.0 (too bouncy reads childish).110111Honor `prefers-reduced-motion` with opacity-only fallback.112113## Copy114115- **Title** is a statement, not a question. "Delete project" or "Deleting project" beats "Are you sure?"116- **Body** explains consequences, specific. "This permanently removes the project and all 47 files" beats "This cannot be undone."117- **Primary button** names the action. "Delete project" not "Yes". "Save changes" not "OK".118- **Secondary button** is usually "Cancel". Plain. Not "No" (pairs poorly with verb-primaries).119120## Destructive confirmations — the extra step121122Type-to-confirm is appropriate for truly irreversible actions.123124```125Type "delete" to confirm.126[______________]127[Delete permanently]128```129130Reserve for: account deletion, workspace deletion, database drops. Overused, it becomes ignored.131132## Anti-patterns133134| Anti-pattern | Why it fails |135|---|---|136| Confirmation modal for every save | Alert fatigue, users stop reading |137| "Are you sure?" as the title | Not informative |138| "OK" / "Cancel" as button labels | Violates canon-ux-writing; buttons should be verbs |139| Modal without focus trap | Keyboard users escape into the background |140| Modal without Escape close | Keyboard users trapped |141| Focus not returned to trigger on close | Disorienting |142| Autofocus on destructive primary button | Accidental confirmation on Enter |143| Three or more modals stacked | Flow is wrong |144| Modal for a settings form that fits on a page | Wasted interruption |145| No backdrop click-to-close on non-critical modals | Forces explicit close |146| Backdrop click closes critical destructive modal | Accidental dismissal = accidental action (wait, reverse this — backdrop close on destructive is actually risky. Require explicit Cancel.) |147148## Focus-on-open strategy149150| Modal type | Autofocus |151|---|---|152| Form modal | First input |153| Confirmation (safe) | Primary button |154| Confirmation (destructive) | **Cancel button** — not the destructive action |155| Alert (info only) | Primary / OK button |156| Empty modal / message | Close button |157158## Decision tree159160```161Does the user need to make a decision that blocks everything else?162 ├─ No → Don't use a modal (use toast, banner, inline, or new page)163 └─ Yes →164 Is the action reversible?165 ├─ Yes → Prefer Undo toast over confirmation166 └─ No → Proceed with modal167 Is this a critical destructive action?168 ├─ Yes → role="alertdialog", default focus on Cancel, require explicit confirm169 └─ No → role="dialog", default focus on primary or first input170```171172## Audit checklist173174- [ ] Modal uses `<dialog>` or has `role="dialog"` / `"alertdialog"`175- [ ] `aria-labelledby` points to the heading176- [ ] Focus moves into the modal on open177- [ ] Focus is trapped inside178- [ ] Focus returns to trigger on close179- [ ] Escape closes (unless explicitly forbidden for alert dialogs)180- [ ] Background scroll locked181- [ ] Title is a statement, not "Are you sure?"182- [ ] Primary button names the action (verb)183- [ ] Destructive confirms default focus on Cancel184- [ ] Mobile uses bottom sheet pattern where appropriate185- [ ] prefers-reduced-motion honored186- [ ] Max height prevents overflow on short viewports187- [ ] Backdrop has visible contrast (not invisible)188189## Sources190191- WAI-ARIA Authoring Practices · Dialog (Modal), Alert Dialog192- WCAG 2.2 · 2.1.2 No Keyboard Trap, 2.4.3 Focus Order, 1.3.1 Info and Relationships193- HTML Living Standard · The `<dialog>` element194- Apple HIG · Sheets, Alerts195- Material Design 3 · Dialog196- Refactoring UI · "Use fewer borders" (applied to modal chrome)
dragoon0x