Modal
A focused, blocking layer for a short decision the user intentionally started.
Definition
Definition
A modal is a dialog that suspends interaction with the rest of the interface until it's closed or a decision is made.
Problem it solves
Problem it solves
A modal interrupts the user on purpose. It blocks the page until one short decision is made, but keeps the user in the same context. No new page, no lost place. That interruption is worth it when skipping the decision would cause real harm: lost data, an irreversible action, a broken state.
When to use it
When to use it
- Destructive confirmations
- Short, self-contained forms
- A mandatory choice before continuing
When not to use it
When not to use it
- The task is multi-step or content-heavy
- The user needs to compare with the full page
Example
Example
- Delete confirmation
- Required plan choice
- Short consent step
See the technical example
<dialog aria-labelledby="confirm-title">
<h2 id="confirm-title">Delete project?</h2>
<p>This action cannot be undone.</p>
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Delete project</button>
</form>
</dialog>Counter-example
Counter-example
A settings page opened in a modal with six tabs and a save button at the bottom is a common misuse. The task isn't a short decision. It's a whole workflow squeezed into a box too small for it, with no URL to return to and no room to compare options.
Questions to ask yourself
Questions to ask yourself
- Would skipping this decision cause real harm (lost data, an irreversible action, a broken state)?
- Can the user still see enough of the page to understand what's happening?
- Can the task be completed in one focused step?
- Does the user need to compare it against content outside the box?
Related patterns