Overlays & feedback
Action sheet
An action sheet is a short list of choices that rises from the bottom of a phone screen after a tap, with a Cancel option at the end.
- Also called
- Action menu, Share sheet, Mobile action list
- Browse examples
- Mobile designs →
What is an action sheet?
The action sheet comes from native mobile apps: tap "Share" or a three-dot icon and a stack of large, tappable options slides up from the bottom edge. Each option is one verb ("Copy link", "Download", "Delete"), destructive actions are shown in red, and a separate Cancel button closes the list without doing anything.
Marketing sites rarely need one, because a landing page asks visitors to do one thing, not choose among five. Where it does fit is on mobile: a "Share this post" button on a blog, a "Download the app" choice between App Store and Google Play, or a language switcher. On those small screens a thumb-reachable list near the bottom is kinder than a tiny dropdown under the header.
It is far more common as illustration. A phone mockup in the hero with an action sheet open ("Send invoice", "Duplicate", "Archive") shows a mobile product at work in one glance. If you draw one, use real action labels from the product; generic "Option 1, Option 2" text reads as a wireframe.
When to use an action sheet, and when not to
Use it for
- A few related actionsTwo to six things a visitor can do with one object, such as sharing or exporting a post.
- Touch-first screensOn phones, where options near the bottom edge are easier to reach than a menu at the top.
- Showing a mobile appA mockup that needs to look like a real phone app, mid-task, rather than a static home screen.
Avoid it for
- Desktop layoutsOn a wide screen a sheet rising from the bottom feels foreign; a dropdown menu or popover sits closer to the trigger.
- NavigationSite links belong in the navigation bar or a hamburger menu, not in a list of actions.
- One obvious actionIf there is only one thing to do, show it as a button instead of hiding it behind a sheet.
Anatomy of an action sheet
- 1ScrimA dimmed layer over the page that signals the sheet is temporary; tapping it dismisses the sheet.
- 2Title or contextAn optional line naming what the actions apply to, such as the file or post.
- 3Action rowsFull-width rows, each with one verb and an optional icon, at least 44px tall for thumbs.
- 4Destructive actionDelete or remove, styled in red and placed apart from safe actions.
- 5Cancel buttonA separate row or block at the bottom that closes the sheet without acting.
Common action sheet variants
1. Native-style list
Stacked rounded blocks with a detached Cancel, mirroring the phone's own system sheet.
2. Icon grid share sheet
A row of app icons above a list, used for sharing to messaging or social apps.
3. Mockup sheet
A static action sheet drawn inside a phone frame to illustrate a mobile product.
Often confused with
Action sheet vs. bottom sheet
A bottom sheet can hold any content, from filters to a full form, and can often be dragged taller. An action sheet holds only a short list of actions and closes as soon as one is picked.
Action sheet vs. dropdown menu
A dropdown menu opens next to its trigger, usually on desktop. An action sheet ignores the trigger's position and rises from the bottom edge of a phone screen.
Frequently asked
Do marketing websites need action sheets?
Rarely. They make sense for mobile share buttons or app-store choices. Most of the time an action sheet on a SaaS site appears inside a phone mockup, as a picture of the product.
Why does an action sheet need a Cancel button if tapping outside closes it?
Because not everyone knows that tapping the dimmed area works. A visible Cancel gives an obvious, safe way out, especially next to a destructive option.