Modals, Drawers, and Popovers: When to Use Each
A modal blocks the screen until the person responds; a popover does not. When to use modals, drawers, and popovers, according to NN/g, Carbon, and Atlassian.
What is the difference between them?
NN/g distinguishes modal from nonmodal dialogs. A modal disables the main content until the person explicitly interacts with it. A nonmodal dialog does not disable the main content (NN/g: Modal and nonmodal dialogs).
Carbon, IBM’s design system, separates components by function. A modal focuses attention on one task and blocks the page until it is completed or closed. A popover shows additional details for specific elements and is a nonblocking layer: only one can appear at a time (Carbon: Modal usage; Carbon: Popover usage). Atlassian defines its Drawer component as a panel that slides in from the side of the screen and documents it as a type of modal dialog (Atlassian: Drawer). In other words, “drawer” describes the shape, not the behavior: a side panel can block the page or leave it active, and you should decide based on the task.
When should you use a modal?
NN/g reserves modals for important warnings that prevent critical or irreversible errors, for requesting critical input, for breaking complex workflows into steps, and for information that could significantly reduce the person’s work. It advises against them for nonessential information, and says they are warranted for irreversible actions, such as overwriting a file (NN/g: Modal and nonmodal dialogs).
Carbon adds practical rules. Modals are for short, infrequent tasks, and should be used sparingly. If a task repeats, make it completable on the main page. They open only from user action, never from the system. For noncritical messages, Carbon recommends a toast or an inline notification (Carbon: Modal usage).
When the modal confirms a destructive action, Carbon asks for the danger variant and a button label with an active verb, such as “Delete,” not “Done” or “OK.” On opening, focus should go to the first input or, if there are no inputs, to the primary button, and it should stay trapped inside the dialog until it closes.
When should you use a drawer or side panel?
When the person needs to complete a secondary task without leaving the page they are on. Atlassian considers it a better fit than a modal in that case, but asks you to use it sparingly: it is invasive, and it is a poor choice if people need to refer to the content behind it. Extended and full-size drawers can make people lose track of their workflow, and there a new page or a nonmodal dialog works better (Atlassian: Drawer).
In practice, a side panel can show the detail of a list item or hold a short form related to what is on screen. If you want the person to look at the list and the panel at once, build the panel as nonmodal; if you make it modal, the list stays inactive until the panel closes. If the panel grows too large, a full page is probably better.
NN/g contrasts modals with nonmodal windows for noncritical tasks, and notes that nonmodal windows suit secondary tasks, such as a compose window in an email app. Its closing warning is useful: avoid modals in checkout flows, because they interrupt a process the person needs to finish without distraction.
When should you use a popover?
When the information is small and tied to an element: an explanation of an icon, the detail of a row, or a short option picker. Carbon says popovers display additional details for specific elements and hold interactive content. They open on click, focus, or hover depending on the case, and close when clicked again or when the person clicks outside (Carbon: Popover usage).
If the content exceeds four columns in width, Carbon recommends switching to a modal. And if you need a flow inside the popover, it probably no longer is a popover.
How do they nest?
Carbon discourages nesting popovers or placing one inside another. It allows tooltips inside a popover, as long as they are not clipped. As a design rule of thumb, a modal should not open from another modal either, because the person loses track of where they are. If a secondary step is unavoidable, resolve it as an extra step inside the same dialog, or as a panel that does not block the previous one.
When should you NOT use an overlay?
- When the content fits on the page. A panel that can appear inline avoids an extra layer.
- When the task is long or recurring. A full page is usually better than a modal opened ten times a day.
- When the person needs to compare two things. A modal covering the list prevents the comparison.
- When the message is not critical. An inline notification is less intrusive.
Illustrative example
Illustrative example: an invoicing system has a list of invoices. Clicking a row opens a side panel with the detail and lets the person edit the amount while the list stays visible. An information icon next to the “Pending” status opens a popover explaining the deadline. When the person chooses “Void invoice,” a modal appears with the danger variant and a “Void invoice” button with an active verb. There are no nested modals: if voiding requires choosing a reason, the reason appears as a step within the same modal. Each layer has a different job.
For the buttons inside the modal to have the right hierarchy, review button hierarchy. And if a message inside the modal is an error, apply how to write error messages.
If the overlay shows data that must be compared, a data table is usually better than a modal. And if the table has row actions, its buttons follow the same button hierarchy.
Common mistakes
- Using a modal for information that needs no response.
- Opening a modal from a system action the person did not request.
- Nesting modals or popovers.
- Using a modal in a purchase flow the person must finish without interruption.
- Leaving focus outside the dialog, so the keyboard still controls the page behind it.
- Putting an “OK” button on a destructive action.
What you can do tomorrow
- List the overlays in your product and note, for each, whether it blocks and whether it requires a mandatory response.
- Replace one informational modal with a side panel or a popover, and test whether people understand the same thing.
- Check with the keyboard that focus enters and leaves each modal correctly.