A dialog overlay that appears on top of the current page and requires explicit user action — confirmation, form completion, or dismissal — before the underlying content becomes interactive again. Modals are powerful for focused tasks but disrupt flow when triggered for non-essential interruptions.
Common contexts
- Using a confirmation modal before a destructive action like permanent data deletion to prevent accidental loss
- Replacing a multi-page form with a modal dialog for a quick inline edit that doesn't warrant a full context switch
- Auditing a product's modal usage to identify which dialogs are triggered for informational messages that should be toast notifications instead
Use when
Use a modal when the task requires complete focus and cannot be interrupted — confirmation of irreversible actions and short focused forms are the clearest legitimate cases.
Avoid when
Don't use a modal to display information users didn't ask for, like a newsletter sign-up during active task flow — interrupting focus for non-critical content is one of the most reliable ways to degrade trust.
Every modal is an admission that you couldn't design the task into the existing context — question whether the interruption is justified before reaching for a dialog.
Real-world examples
- Dropbox's 'Move to Trash?' modal for file deletion deliberately interrupts flow to confirm an irreversible action — UX research shows modals are most accepted by users when the consequence is permanent.
- Slack's channel-archive confirmation requires users to type the channel name — a friction pattern within a modal that dramatically reduced accidental irreversible deletions in their user base.
- Nielsen Norman Group research found that promotional modals ('subscribe to our newsletter!') are dismissed within 500ms by 95% of users, with the remaining 5% closing them within 3 seconds.