--- title: "Action sheet UI: anatomy, variants and examples | Kombai" description: "An action sheet rises from the bottom of a phone screen with a short list of choices about what people just tapped, and a Cancel button." canonical_url: https://kombai.com/glossary/action-sheet/ author: "The Kombai Team" --- # Action sheet An action sheet rises from the bottom of a phone screen with a short list of choices about what people just tapped, and a Cancel button. - Also called: options menu - Platforms: Web, Mobile - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/action-and-option/), [134 mobile designs](https://kombai.com/gallery/mobile/action-and-option/) - [Anvilhead](https://kombai.com/gallery/inspirations/action-option-ios-46/) (Mobile) - [Ropewalk](https://kombai.com/gallery/inspirations/action-option-ios-36/) (Mobile) - [Bramble](https://kombai.com/gallery/inspirations/action-option-ios-134/) (Mobile) ## What is an action sheet? An action sheet is a short list of choices that slides up from the bottom of the screen after people tap something, like a photo, a post or a More button. Each choice is a button, destructive ones are red, and a separate Cancel button closes the sheet without doing anything. - Choices relate to the thing people just tapped, not to the whole app. - Cancel sits apart at the bottom, and a tap outside the sheet does the same. ## When to use action sheet - **Choices about one item.** Share, save, edit or delete the photo or post people tapped. - **Clarifying an action.** Leaving a draft, then choosing to save it or delete it. - **Picking a source.** Take a photo or choose one from the library. ## When not to use one - **Long lists.** An action sheet shouldn't scroll. Use a full sheet or a page. - **Information only.** Nothing to choose? Use a toast or an inline message. - **Big screens.** On desktop, a dropdown or context menu fits better. ## Anatomy 1. **Title**: Optional, one line of context 2. **Actions**: One button per choice 3. **Destructive action**: Red, so it stands out 4. **Cancel button**: Apart, at the bottom 5. **Scrim**: Dims the screen, tap to cancel 6. **States**: Closed, open, focus, destructive ## Variants We sorted every design in the Kombai gallery category that holds action sheets and found five patterns among the real ones. ### 1. Native stacked buttons The system look: centered text buttons in one rounded group, with Cancel in its own group below. - [Member profile](https://kombai.com/gallery/inspirations/action-option-ios-45/) (Mobile) - [Hairspring](https://kombai.com/gallery/inspirations/action-option-ios-57/) (Mobile) - [Tintra](https://kombai.com/gallery/inspirations/action-option-ios-95/) (Mobile) ### 2. Icon lists Left-aligned rows, each with an icon, for longer sets of item actions like rename, pin or copy link. - [Bower](https://kombai.com/gallery/inspirations/action-option-ios-23/) (Mobile) - [Marginalia](https://kombai.com/gallery/inspirations/action-option-ios-26/) (Mobile) - [Furlong](https://kombai.com/gallery/inspirations/action-option-ios-16/) (Mobile) ### 3. Report and block sheets Moderation choices on a profile or a post, with Report and Block in red. - [Halona](https://kombai.com/gallery/inspirations/action-option-ios-121/) (Mobile) - [Quartzite](https://kombai.com/gallery/inspirations/action-option-ios-35/) (Mobile) - [Tidewrack](https://kombai.com/gallery/inspirations/action-option-ios-55/) (Mobile) ### 4. Edit and delete sheets Just two or three choices for something people made, like a comment, a shelf or an entry. - [Cedar Commons](https://kombai.com/gallery/inspirations/action-option-ios-71/) (Mobile) - [Bindery](https://kombai.com/gallery/inspirations/action-option-ios-89/) (Mobile) - [Warpline](https://kombai.com/gallery/inspirations/action-option-ios-40/) (Mobile) ### 5. Titled sheets A header that names the item, like a booking, a station or a series, above its actions. - [Roadmere](https://kombai.com/gallery/inspirations/action-option-ios-104/) (Mobile) - [Aureo](https://kombai.com/gallery/inspirations/action-option-ios-125/) (Mobile) - [Nocturne](https://kombai.com/gallery/inspirations/action-option-ios-19/) (Mobile) ## Where action sheets show up ### Posts and profiles Share, copy, report or mute from the More button on a post or a profile. - [Kerfhaven](https://kombai.com/gallery/inspirations/dialog-web-50/) (Web) - [Wrenfold](https://kombai.com/gallery/inspirations/action-option-ios-51/) (Mobile) - [Halftone](https://kombai.com/gallery/inspirations/action-option-ios-75/) (Mobile) ### Trips and bookings Change dates, invite travellers, rename or leave a trip, without leaving the itinerary. - [Voyara](https://kombai.com/gallery/inspirations/action-option-ios-96/) (Mobile) - [Voyara](https://kombai.com/gallery/inspirations/action-option-ios-93/) (Mobile) - [Roundtrip](https://kombai.com/gallery/inspirations/action-option-ios-72/) (Mobile) ### Libraries and saved items Queue, favourite or remove a saved title, show or file from where it sits in the list. - [Sift](https://kombai.com/gallery/inspirations/action-option-ios-128/) (Mobile) - [Halyard](https://kombai.com/gallery/inspirations/action-option-ios-100/) (Mobile) - [Anorthite](https://kombai.com/gallery/inspirations/action-option-ios-31/) (Mobile) ## Action sheet vs similar components | | [Action sheet](https://kombai.com/glossary/action-sheet/) | [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | [Context menu](https://kombai.com/glossary/context-menu/) | |---|---|---|---|---| | Opens from | A tap on an item or More | A button or a screen | A button | A right-click or long press | | Holds | A few actions and Cancel | Any content | Commands or options | Actions for one item | | Best for | Choices on a phone | Short mobile tasks | Toolbars and forms | Power users on desktop | ## Build notes - Put Cancel at the bottom, apart from the other choices, and use the title Cancel. - Style destructive choices in red. Apple places them at the top of the sheet, where they are most noticeable. - Keep it short enough that it doesn't scroll. Long lists are hard to scan and easy to mis-tap. - Keep the title to one line, and add a message only when the choice needs explaining. - On the web, build it as a modal dialog of buttons: role="dialog", aria-modal="true" and a label. - Move focus to the first choice on open, treat Escape and a tap outside as Cancel, and return focus to the trigger. ## FAQ ### What's the difference between an action sheet and a bottom sheet? An action sheet is a kind of bottom sheet that holds only choices: a few buttons and Cancel. A bottom sheet can hold anything, like a form, a map card or a long list. ### Action sheet or alert? Use an action sheet for choices that follow something people chose to do, like discarding a draft, where they can delete it or save it. Use an alert for something unexpected, like a problem they need to know about. ### Where should the destructive option go? Apple puts destructive choices at the top of the sheet, in the destructive red style. Many designs in the gallery put Delete last, just above Cancel. Either way, make it red and keep Cancel separate. ### Do action sheets work on the web? They show up on mobile web, often for post and profile options. On desktop, a dropdown or a context menu next to the item usually works better than a sheet at the bottom of a wide screen. ## Related terms - [Bottom sheet](https://kombai.com/glossary/bottom-sheet/) - [Context menu](https://kombai.com/glossary/context-menu/) - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Dialog](https://kombai.com/glossary/dialog/) ## References - [Apple Human Interface Guidelines: Action sheets](https://developer.apple.com/design/human-interface-guidelines/action-sheets) - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)