| 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. | Use an action menu when users need several contextual commands without keeping every command visible, and the list itself must explain scope, availability, risk, and outcome. | Use bottom sheets for mobile contextual details or controls that benefit from lower-edge reach while preserving orientation to the current background object. | Interrupt users only when the action has a meaningful consequence that cannot be safely recovered afterward. |
| 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. | A More menu contains Open, Edit, View, Delete, Settings, Filter, Owner, and a search box with no sections or object names. | A bottom panel covers the entire map immediately, has no handle, and hides the selected pin. | A popup says Are you sure? with OK and Cancel but does not name the project, notes, or irreversible outcome. |
| 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 sheet appears on app launch with promotional choices even though the user did not initiate an action. | A user chooses Delete from a generic row menu and cannot tell whether it deletes the row, account, attached files, or selected customers. | 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 | The user has not initiated an action. | 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. | Treating the action menu as a junk drawer for every command that does not fit elsewhere. | 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. |