Updated
Action Sheet
Action Sheet presents a short list of actions for one object, anchored to the bottom of the screen.
Updated
Preview
A bottom anchored list of actions about one object, over a scrim that blocks everything behind it. Live specimen: dismiss it from the close button or the scrim.
The sheet is 396 tall by arithmetic: 24 of top padding, then blocks of 60, 140 and 120 stacked 16 apart, then 20. It hugs, so a fuller slot grows the sheet and leaves padding and gaps alone.
The sheet comes in at 200 on decelerate and leaves at 120 on accelerate, the motion/sheet tokens in the Motion collection.
The sheet is radius 48 on bg/raised, white in Light and #242427 in Dark, with no stroke. The two actions are capsules, Button at Size lg, 56 tall.
The close is a 32 Compact Button at Style Transparent. Give it a 44 pt hit area on iOS and 48 dp on Android in code.
Source: Action Sheet, node 124:4488 of the Appetite UI Figma file, read on October 2, 2026.
What goes in the header of an Action Sheet?
The header block carries the message: a 24/32 Semi Bold title and a 16/24 subheadline, 4 apart. The subheadline is a boolean, and without it the block gives back 28.
Subheadline True, block 60 tall
Subheadline False, block 32 tall
The 60 assumes one line of subheadline. Two lines make the block 84 and the sheet 420.
Which properties does Action Sheet have?
No variant axis. Two text properties, one boolean and one slot.
| Property | Type | Default |
|---|---|---|
Title | Text | Title of action sheet |
Subheadline | Boolean | true |
Subheadline Text | Text | Subheadline of action sheet |
Content Slot | Slot | Empty |
Action Sheet ships one variant. The two actions are Button instances, so type, style, size and state live on Button.
Tokens
Every value the component reads, resolved through its aliases to the primitive underneath.
| Token | Light | Dark | Applied to |
|---|---|---|---|
bg/raised | #FFFFFF | #242427 | Sheet fill |
text/strong-950 | #0E0E0F | #FFFFFF | Title |
text/sub-700 | #48484A | #C7C7CC | Subheadline |
fg/soft-500 | #8E8E93 | #AEAEB2 | Close icon |
brand/base | #155DFC | #2B7FFF | Filled fill, Link label |
static/static-white-0 | #FFFFFF | #FFFFFF | Filled label |
bg/scrim | #000000 at 40% | #000000 at 48% | The scrim behind the sheet |
Radius is dimensions/radius/5xl at 48 on the sheet and full on every button, the close included. The shadow is dropShadow/2xl, two black layers at 12 percent in both themes.
The sheet has no stroke. In dark it separates from the screen by bg/raised alone.
How does Action Sheet differ on iOS and Material 3?
iOS draws its own action sheet and Material 3 has a bottom sheet. Appetite UI Action Sheet is the one cross-platform version, with capsule actions and a slot for your own content.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Action Sheet | iOS / Action Sheet, 300 x 362 at radius 32 on glass, with capsule _Action Button in Secondary and Destructive, padded 14 | M3 / Bottom sheet, Modal False or True, 412 wide | Appetite UI is 340 wide at radius 48 on bg/raised, with a title row, a content slot and Brand buttons. The iOS sheet is a smaller glass card with fixed actions. Material has no action sheet and uses a modal bottom sheet. |
On iOS use the system control for the action list and take the type and color from Appetite UI. On Android use a Modal Sheet.
The 56 tall actions clear the minimum touch target of 44 pt on iOS and 48 dp on Android, set by platform/min-touch-target.
Guidelines
Do
Put the destructive action last and give it the error tokens. A red row that always sits in the same place is a row people learn to look for.
Don't
Do not stack four equal actions. A sheet settles one decision about one object, and a list of everything you can do is a menu that goes in the slot.