Use a popover for small anchored contextual content or light controls, a menu button for command lists, a modal dialog for blocking compact tasks, and a sheet for roomier temporary child tasks.
Use a popover for small anchored contextual content or light controls, a menu button for command lists, a modal dialog for blocking compact tasks, and a sheet for roomier temporary child tasks.
Practice the judgment: Imagine this situation: A local date explanation is implemented as a modal dialog, interrupting the form even though page context should remain usable. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Popover | Menu button | Modal dialog | Sheet |
|---|---|---|---|---|
| UI or UX | UI + UX - Small anchored contextual overlay | UI + UX - Button-controlled popup menu of actions or links | UI + UX - Focused modal task layer | UI + UX - Adaptive temporary sheet for a context-bound child task |
| UI guidance | Render a popover as a compact surface visually tied to the trigger, field, selection, or object that opened it, with a clear title or labelled content when the body is more than a short sentence. | Render a named button trigger, visible opened state, controlled popup, menu items, active item styling, disabled item state, separator or section grouping, and a safe way to distinguish destructive commands. | Render a titled layer above a dimmed or otherwise unavailable page, with clear task content, named actions, visible close or cancel affordance, and stable scroll boundaries. | Render a sheet as a titled adaptive surface with clear edge or window attachment, visible close or back controls, stable actions, and sizing that matches the task. |
| UX guidance | Make opening, light dismissal, Escape, outside click, anchor scrolling, focus order, and focus return predictable so the surface feels contextual rather than interruptive. | Make dismissal, activation, focus return, unavailable actions, and high-risk command handoff predictable so the menu behaves like a command chooser rather than a hidden form. | Use the modal interruption only for compact tasks that genuinely need temporary focus before the user returns to the page. | Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes. |
| Good UI | A Due date button in a task row opens a small popover beside the field with Today, Tomorrow, Friday, a custom date field, and a visible close control. | A table row has a Report actions button that opens a compact menu with Open, Rename, Duplicate, Archive, and an unavailable Export item. | Account settings opens in a titled dialog with one display-name field, Save, Cancel, close control, and dimmed inactive page context. | A review follow-up sheet opens from a claim row with the title Schedule follow-up for Claim C-1042, fields, close control, compact and expanded sizes, and sticky Save and Cancel actions. |
| Bad UI | Escape closes the layer but focus disappears or jumps to the top of the page. | A primary Save action is hidden behind More while lower-priority icons remain visible. | A vague popup titled Popup floats over active page controls and offers only OK. | A swipe-dismiss sheet contains unsaved form fields but disappears immediately when the user drags or presses Escape. |
| Good UX | Opening the due-date popover moves focus to the first date option, choosing Tomorrow updates the field, closes the layer, and returns focus to the Due date trigger. | A user opens Report actions, arrows to Duplicate report, activates it, and focus returns to the Report actions trigger with a status update. | Opening moves focus to the display-name field, Tab remains inside the layer, Escape cancels, and closing returns focus to Open dialog. | Opening the sheet focuses the first useful field, expanding the sheet preserves typed notes, Escape triggers discard review when edits are dirty, and Save returns focus to the claim row. |
| Bad UX | The user scrolls and the popover stays in the old position, so it appears to describe the wrong field. | A user tabs into a menu and lands in a text input because the menu contains unrelated form controls. | Users can click background Delete or Navigate controls while the modal is still open. | The sheet blocks the queue even though the user's main task is comparing records, or it contains full navigation that should belong elsewhere. |
| Best fit | A local control needs brief explanatory content or light editing while page context remains visible. | A local object or toolbar has three to eight secondary commands. | A short task must interrupt normal page interaction but should return users to the same context afterward. | The surface needs adaptive size, edge attachment, drag or detent behavior, or a clear temporary child-task mode. |
| Avoid when | The content is essential instruction that must remain visible for task completion. | The job is choosing a form value, selecting several values, or browsing a long list. | The workflow is long, multi-step, shareable, or needs browser navigation. | The content is mainly destination navigation. |
| Required state | Closed trigger state with visible label, icon name, or field relationship. | Closed trigger state with visible or accessible name. | Closed page state with an obvious invoking control. | Closed parent state with an opener tied to the object, field, or task that launches the sheet. |
| Accessibility burden | Use a real button or equivalent control as the trigger whenever possible. | Use an actual button for the trigger when possible. | Use dialog semantics with an accessible name from the visible title. | Give the sheet a visible heading and use it as the accessible name. |
| Common misuse | Using a popover as a hidden modal, drawer, sheet, command menu, or full workflow. | Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select. | Using a modal as a generic container for routine information that could stay inline. | Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions. |