Should it be?

Modal

It blocks the interface for a short decision the user deliberately started.

HighSimple

What a modal does

A modal is a dialog that puts the rest of the interface on pause until the user closes it or makes a decision.

The real job

Pause the page for one short decision

A modal cuts in on purpose. It freezes the page just long enough for one short decision, then drops the user back into the same context. That interruption earns its keep when the alternative is real damage: lost work, an irreversible action, a broken state.

Good fit

When a modal is still the right call

  • Destructive confirmations
  • Short forms with a clear end
  • A mandatory choice before the flow can continue

Bad fit

When it starts turning into a tiny page

  • The task has several steps or too much content
  • The user needs the full page to compare or understand

In the wild

What a solid modal looks like

  • Delete a project
  • Choose a plan before continuing
  • Confirm a 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>

Classic trap

A settings flow is not a modal

A settings screen crammed into a modal with six tabs and a save button at the bottom is the classic miss. This is no longer one short decision. It's a full workflow trapped in a box that's too small, with no URL to return to and no room to compare options.

Before you choose

A few questions before you reach for a modal

  1. Would skipping this decision create real damage: lost work, an irreversible action, a broken state?
  2. Can the user still understand the situation with only part of the page visible?
  3. Can this be done in one focused step?
  4. Does the user need to compare with content outside the box?

You may need…