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