| UI or UX | UI + UX - Mobile bottom-anchored contextual overlay with detents | UI + UX - Adaptive temporary sheet for a context-bound child task | UI + UX - Supplemental edge panel for current-context detail or light actions | UI + UX - Persistent mobile primary navigation |
| UI guidance | Render a bottom sheet as a lower-edge surface with a visible handle, rounded top edge, safe-area spacing, meaningful peek content, and controls that remain reachable from the bottom of the screen. | 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. | Render a drawer as an edge-aligned panel with a visible heading, selected-object identity, close control, stable width, and clear relationship to the page content it supplements. | Render three to five bottom destinations with stable touch targets, labels or accessible names, reinforcing icons, selected state, optional badges, and safe-area spacing. |
| UX guidance | Use bottom sheets for mobile contextual details or controls that benefit from lower-edge reach while preserving orientation to the current background object. | Use sheets for short child tasks that need more room than a dialog while preserving parent context after the task closes. | Use drawers to preserve parent-page context while users inspect supplemental detail or perform simple adjacent actions. | Support rapid switching between top-level mobile sections while preserving each section's local navigation, scroll, filters, and drafts. |
| Good UI | A map pin opens a bottom sheet with a handle, station name, distance, primary route action, half-height service details, and full-height stop list. | 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. | A right-side case details drawer opens from a table row, names Claim C-1042, shows status, owner, activity, and a close button while the table remains visible. | Selected state uses shape, weight, and text color instead of relying on color alone. |
| Bad UI | A bottom sheet contains a long settings workflow and bottom navigation links, with the primary action below the device safe area. | A swipe-dismiss sheet contains unsaved form fields but disappears immediately when the user drags or presses Escape. | A drawer contains navigation links, filters, account settings, and destructive commands under one unlabeled heading. | Six tiny icon-only items and a center plus button compete for space. |
| Good UX | Users open a station sheet from the map, peek at the station identity, expand to half height for next departures, expand to full height for all stops, collapse back to the map, and keep the selected pin visible. | 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. | Opening the drawer preserves the table filter and selected row, Next item updates the drawer title, Escape closes it, and focus returns to the selected row. | Switching from Home to Saved and back preserves each section's scroll count and draft state. |
| Bad UX | Users drag on the list expecting to scroll, but the whole sheet dismisses and loses the selected map pin. | The sheet blocks the queue even though the user's main task is comparing records, or it contains full navigation that should belong elsewhere. | The drawer keeps showing Claim C-1042 after the user selects Claim C-1043 in the table. | Tapping Search clears the Home feed position and opens a one-off command instead of a destination. |
| Best fit | Mobile users need extra contextual detail or controls while staying oriented to a map, feed, route, media item, or selected object. | The surface needs adaptive size, edge attachment, drag or detent behavior, or a clear temporary child-task mode. | Users need to inspect object detail, metadata, comments, history, or light actions while staying on the current page. | A compact mobile app has three to five high-frequency top-level destinations. |
| Avoid when | The surface contains persistent app destinations or global navigation. | The content is mainly destination navigation. | The surface is mainly app navigation or destination switching. | There are fewer than three or more than five primary destinations. |
| Required state | Closed state with a trigger tied to the current map item, feed card, route, media item, or contextual action. | Closed parent state with an opener tied to the object, field, or task that launches the sheet. | Closed state with a clear opener tied to a specific object or page section. | Default state with all primary destinations visible. |
| Accessibility burden | Give the bottom sheet a visible heading or context label and expose it as the accessible name. | Give the sheet a visible heading and use it as the accessible name. | Give the drawer a visible heading and expose it as the accessible name for the region or dialog-like surface. | Every icon must have a visible label or accessible name. |
| Common misuse | Using a bottom sheet as hidden global navigation or a dumping ground for unrelated commands. | Using a sheet as a catch-all panel for navigation, filters, help, settings, and unrelated actions. | Using a drawer as an unlabeled junk panel for unrelated commands, navigation, filters, and help. | Putting too many destinations into the bar. |