| 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 | Use a popover when users need local context, clarification, or a small edit without losing their place in the page. | Use a menu button when users need to reveal a short contextual set of commands or links from a single trigger without leaving the current object or toolbar context. | 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 | A large floating panel appears in the middle of the screen with no arrow, no title, no trigger relationship, and hidden controls below the fold. | An unlabeled ellipsis opens a loose panel of buttons, inputs, links, toggles, and destructive commands with no active item. | A vague popup titled Popup floats over active page controls and offers only OK. | A panel titled Sheet opens with no selected object, no close affordance, and hidden actions below an inner scroll area. |
| 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. | A user changes the appointment note, presses back, and loses the work without a decision point. |
| 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. | A user starts a short context-bound task that needs more room than a dialog but should not become a full page. |
| 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 content is only informational and does not require blocking the page. | 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. |