Action Sheet
操作表
A classic iOS modal sheet that presents contextual action options from the bottom, separating destructive actions and Cancel into a distinct island.
Live Demo
Actually clickable海边日落.heic
拍摄于 2026年10月 · 4.2 MB
What you just saw:Tap "..." on an iOS photo to bring up "Share", "Duplicate", and a red "Delete" option, with an isolated "Cancel" button pill at the very bottom.
What it actually is
Action Sheet is a foundational pattern from Apple Human Interface Guidelines (HIG). It presents two or more context-specific choices triggered by a user action. Unlike standard bottom sheets meant for complex views, an action sheet focuses strictly on rapid, thumb-friendly decision-making on mobile screens. A detached "Cancel" button island at the bottom prevents accidental taps.
Anatomy · What it's made of
Action Group操作选项组
Translucent blur card housing standard and destructive options
Destructive Item破坏性项
Highlighted in danger red text for high-consequence items
Cancel Island独立取消岛
Detached bottom pill physically separated from the main list
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| Mobile action options need to be reachable within thumb range at screen bottom | Yes |
| Confirming high-risk or irreversible destructive options on touch devices | Yes |
| Offering 2 to 5 immediate contextual actions following a trigger | Yes |
| Long complex forms or scrolling lists (use standard Bottom Sheet or Modal) | No |
Avoid cramming complex inputs, sliders, or heavy content into an Action Sheet.
Do not omit the detached Cancel button on iOS devices, as users rely heavily on it for escape.
Similar Patterns
Don't mix these upAction SheetCurrent
操作表
A classic iOS modal sheet that presents contextual action options from the bottom, separating destructive actions and Cancel into a distinct island.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
In one line:A classic iOS modal sheet that presents contextual action options from the bottom, separating destructive actions and Cancel into a distinct island.
Bottom Sheet
底部弹出面板
A panel that slides up from the bottom edge of the screen and rests there without taking over the whole display.
Modal
模态框 / 对话框
Something pops up in the middle of the screen, and until you deal with it you cannot use the page underneath.
Destructive Action
破坏性操作
An action that is hard to undo once taken — delete, clear, deactivate. Its button has to be red.
How to tell AI
Three levels of promptAdd the component name and specifics
Implement an iOS HIG Action Sheet: frosted glass backdrop, stacked action items with a red destructive option, and a detached cancel button island at the bottom.
Don't just say this to AI
Bad → BetterDon't say this to AI
Pop up a bottom list with some buttons.
Say this instead
Follow iOS Action Sheet guidelines: frosted glass upper card grouping actions with danger items highlighted, and a physically separated Cancel button island at the bottom.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.