Modal

Definition

A modal is a dialog that floats up as a fresh layer above the screen you were just looking at, pulling your attention firmly inside it. When it opens, it covers the background behind it with a translucent scrim that dims everything, and the elements underneath can no longer even be clicked. So the user can't wander off elsewhere until they finish the task inside the modal, whether that means making an important confirmation or entering a value the app truly needs. A window asking "Are you sure you want to delete this?" or a short login form is a classic modal. In short, a modal declares to the whole screen that this one decision comes before anything else.

Why does it matter?

A modal's power lies in interrupting the flow, and its weakness sits in exactly the same place. Because it blocks the background and springs to the front, it's unbeatable at holding on to a confirmation you can't afford to miss or an action you can't undo. But that very forcefulness is why overusing it makes people feel boxed in, as if a window blocks every single thing they try to do. So a modal is a strong tool you should save for the rare moment that genuinely deserves to stop the flow. A modal is also a composite pattern, where several principles click into place at once: it hides the background with a scrim, raises its elevation so it sits above other elements, and traps keyboard focus inside while it's open. Only when these pieces move together does a modal really do its job.

Common mistakes

• Firing off a modal for even trivial notices. When you use a modal for something that just needs to be announced, like a successful save, the user has to click a button to dismiss the window every time. Light news like this belongs in a toast or an inline message instead. The more you overuse modals, the more the user tires of closing them and starts brushing past even the important confirmations.
• Giving only one way to close it, or leaving one out entirely. When clicking outside or pressing ESC is blocked, the user feels trapped, with no way out of a window they opened by mistake.
• Making the confirm button for a risky action, like a delete, look identical to an ordinary button. When color and position don't set it apart, the user can absent-mindedly hit the destructive option and make a mistake they can't undo.

Practical tips

• A modal is a strong device that cuts the flow, so use it only when you really must, and always offer several ways to close it: an X button, a click on the outside area, and the ESC key together. Users shouldn't feel trapped, so they need to be able to leave whenever they want.
• For actions you can't undo, like a delete, mark the confirm button clearly in a color that signals danger. When color alone isn't enough, make the button text itself spell out what will happen, like "Delete."
• When a modal opens, trap keyboard focus inside it, and when it closes, send focus back to the spot you originally clicked from. This one bit of handling transforms the experience for keyboard and screen reader users.

Related concepts