Page vs Modal Decision Checklist
When to use: Deciding whether content should be a modal, drawer, or full page.
The test: Can users complete this without losing context? Do they need to share/bookmark it?
Quick Decision Tree
1. Does it need a URL? → PAGE
2. Is it a quick confirmation? → MODAL
3. Is it a multi-step process? → PAGE
4. Does it require focus? → MODAL
5. Can it exceed viewport height? → PAGE
Choose MODAL When
- Quick acknowledgment needed (success, error, warning)
- Simple yes/no decision
- Brief data entry (1-3 fields)
- Viewing details without losing list context
- Confirming destructive action
- Content is self-contained (clear start and end)
- Task completes in under 30 seconds
Choose PAGE When
- Content needs a shareable URL
- Content could be bookmarked
- Multi-step process or wizard
- Complex form (4+ fields)
- Content requires scrolling
- User research or reference content
- Primary use is mobile
- Multiple primary actions needed
Modal Design Rules
Content
- Clear title describing the action
- Focused scope (one decision/task)
- Content fits in viewport without scrolling
- Clear path to dismiss (X button, outside click, Escape)
Actions
- Maximum 2 primary actions
- Primary action clearly distinguished
- Cancel/dismiss always available
- Destructive actions require confirmation
Accessibility
- Focus trapped within modal
- Focus returns to trigger on close
- Escape key closes modal
- Screen reader announces modal opening
- Background content not interactive
Modal Anti-Patterns
| Don't | Why | Instead |
|---|---|---|
| Modal opens modal | Confusing depth | Use page or wizard |
| Scrolling content | Users lose place | Use page |
| Complex forms | Easy to lose data | Use page with save |
| Navigation inside modal | Breaks mental model | Use page |
| Modal on mobile for primary flow | Poor mobile UX | Use page |
Choose DRAWER When
A drawer is a modal alternative for:
- Supplementary content (help, settings)
- Quick edits to list items
- Filters and sorting options
- Preview without navigation
Drawer Rules
- Opens from edge of screen
- Doesn't block entire viewport
- Easy to dismiss (swipe on mobile)
- Clear relationship to triggering element
Context Retention Questions
Ask these to decide:
| Question | Yes → Modal | No → Page |
|---|---|---|
| Will user return to current view? | Modal | Page |
| Is task interruptible? | Page | Modal |
| Does user need to compare to current view? | Modal | Page |
| Can user save progress? | Page | Modal |
| Is content temporary/transient? | Modal | Page |
Implementation Checklist
Modal
<Modal
isOpen={isOpen}
onClose={handleClose}
title="Confirm Action"
aria-labelledby="modal-title"
>
<ModalContent>...</ModalContent>
<ModalActions>
<Button variant="secondary" onClick={handleClose}>Cancel</Button>
<Button variant="primary" onClick={handleConfirm}>Confirm</Button>
</ModalActions>
</Modal>
- Manages focus correctly
- Locks background scroll
- Handles Escape key
- Animates in/out smoothly
- Works on all screen sizes
Page
- Has unique URL
- Browser back works correctly
- Breadcrumbs show location
- Mobile navigation clear
- Form state persists on refresh
Quick Diagnosis
| Symptom | Likely Cause | Fix |
|---|---|---|
| Modal feels cramped | Too much content | Move to page |
| Users get lost | Modal inside modal | Flatten to single layer |
| Mobile users complain | Modal covers too much | Use page or drawer |
| Users can't find content again | No URL | Move to page |
| Data entry feels risky | No save option | Add save or move to page |