--- title: Action Sheet description: Action Sheet lists the actions for one object at the bottom of the screen. Appetite UI Figma component: radius 48, capsule buttons, a slot and tokens. group: Components source: https://www.appetiteui.com/docs/action-sheet dateModified: 2026-10-03 --- # Action Sheet Updated: October 3, 2026. Action Sheet presents a short list of actions for one object, anchored to the bottom of the screen. ## 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. Specimen: Action Sheet, shipped content. 340 x 396, padding 24 20 20, gap 16, radius 48. 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. Specimen: Subheadline True, Subheadline False. block 300 x 60, then 300 x 32. 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. - Avoid: 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. ## In the screens and the glossary - Glossary: [Bottom sheet](https://www.appetiteui.com/academy/glossary/bottom-sheet) - Glossary: [Action sheet](https://www.appetiteui.com/academy/glossary/action-sheet)