| UI or UX | UI + UX - Platform-presented action choice sheet | UI + UX - Contextual command list for a resource or selection | UI + UX - Mobile bottom-anchored contextual overlay with detents | UI + UX - Consequential alert decision |
| UI guidance | Render an action sheet as a short platform-style list of choices tied to the action the user just initiated, with a visible title or message when context is needed, clear action roles, a distinct cancel route, and destructive choices visually separated. | Render a compact menu of verb-led actions scoped to one resource, row, card, selected set, or page object, with clear section headings, object-aware labels, disabled reasons, and separated dangerous commands. | 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 an alert-style modal decision with a specific title, consequence description, safe cancellation, and a destructive action label that names the object or scope. |
| UX guidance | Use an action sheet when users intentionally start an action and need to choose among a few valid outcomes before the product continues, such as Save draft, Discard draft, Share, Report, or Cancel. | Make the current object or selection count explicit, update actions when scope changes, and route destructive or privacy-sensitive commands into confirmation, undo, restore, or review instead of running silently. | Use bottom sheets for mobile contextual details or controls that benefit from lower-edge reach while preserving orientation to the current background object. | Help the person reach a clear task outcome. |
| Good UI | A mail composer Cancel button opens an action sheet titled Save this draft? with Save draft, Discard draft in destructive styling, and Cancel separated at the bottom. | A Customer actions menu has Manage customer, Data requests, and Account risk sections, with Edit customer, Merge customer, Request data export, and Delete customer separated at the end. | 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. | Delete Research archive? explains that 14 notes and shared links will be permanently removed, offers Keep archive, and labels the danger action Delete archive. |
| Bad UI | A bottom overlay opens with navigation links, filters, a preview image, a text field, and a Delete button all in one scrollable sheet. | Safe, risky, disabled, external, and value-selection items share the same style and role. | A bottom sheet contains a long settings workflow and bottom navigation links, with the primary action below the device safe area. | The red destructive action is enabled immediately and sits where users expect the routine primary button. |
| Good UX | A user taps Cancel while editing Message draft 18, chooses Save draft, the sheet closes, and focus returns to the composer with a saved-draft status. | A user opens Customer actions, chooses Duplicate customer, and receives status that names the customer and keeps focus anchored to the action context. | 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. | Cancel, Escape, and Keep archive leave the archive unchanged and return focus to Delete archive. |
| Bad UX | A user tries to scroll through many actions and accidentally taps Delete because the sheet is overloaded and lacks destructive separation. | A user activates a menu item that looks like a command but navigates away and loses unsaved context. | Users drag on the list expecting to scroll, but the whole sheet dismisses and loses the selected map pin. | Every archive, filter, and dismiss action opens the same confirmation until users click through automatically. |
| Best fit | A user-initiated action has a few immediate valid outcomes. | A resource, row, card, selected set, or local page object has several contextual commands. | Mobile users need extra contextual detail or controls while staying oriented to a map, feed, route, media item, or selected object. | The action is destructive, irreversible, costly, security-sensitive, privacy-affecting, or externally visible. |
| Avoid when | There is only one consequence decision and a confirmation dialog would be clearer. | Only one or two commands are needed and visible buttons would be faster. | The surface contains persistent app destinations or global navigation. | The action is routine and easily reversible. |
| Required state | Resting state with an initiating control or task context. | Closed trigger or contextual entry point with resource scope. | Closed state with a trigger tied to the current map item, feed card, route, media item, or contextual action. | Pre-action state with an explicit consequential trigger. |
| Accessibility burden | Give the sheet an accessible name that states the action or affected object. | Give the trigger or menu an accessible name that includes the resource or selected-set scope. | Give the bottom sheet a visible heading or context label and expose it as the accessible name. | Use alertdialog semantics or platform equivalent when the decision is urgent and requires a response. |
| Common misuse | Showing an action sheet before the user starts an action. | Letting a bulk action menu run single-object commands against multiple selected items. | Using a bottom sheet as hidden global navigation or a dumping ground for unrelated commands. | Asking users to confirm every routine action until they stop reading. |