ActionSheet

Organism
A modal sheet of contextual actions, the iOS action sheet idiom: a bottom sheet of choices summoned in response to a user action, over a dimmed scrim that glass on the web also blurs.
src/organisms/action-sheet
View in Overlays & feedback

Playground

Every control sets a real prop of ActionSheetProps. The JSX below updates as you go.
Props
title
string
message
string
cancelLabel
string
JSX · ActionSheetProps
<ActionSheet
title="Share board"
message="Choose where to send it"
cancelLabel="Cancel"
/>

Variants

4 examples from src/organisms/action-sheet/action-sheet.md, each rendered live from its own JSX.
With a title and message
<ActionSheet
trigger="Discard draft…"
title="Discard draft?"
message="Your unsaved changes will be lost."
actions={[
{ label: "Discard Changes", onPress: () => {} },
{ label: "Keep Editing", onPress: () => {} }
]}
/>
Destructive action
<ActionSheet
trigger="File options"
actions={[
{ label: "Move to Folder", onPress: () => {} },
{ label: "Delete File", destructive: true, onPress: () => {} }
]}
/>
Disabled action
<ActionSheet
trigger="File options"
actions={[
{ label: "Save", onPress: () => {} },
{ label: "Save As…", disabled: true, onPress: () => {} }
]}
/>
Controlled
<Stateful initial={false}>
{(open, setOpen) => (
<>
<Button onPress={() => setOpen(true)}>Share…</Button>
<ActionSheet
open={open}
onOpenChange={setOpen}
actions={[
{ label: "Copy Link", onPress: () => {} },
{ label: "Send by Email", onPress: () => {} }
]}
/>
</>
)}
</Stateful>

Anatomy

1
Scrim
2
Sheet
3
Title
4
Action
5
Destructive action
6
Cancel
Dimmed parts appear only in some states or variants.

Props

10 props on ActionSheetProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
10 props
open
boolean
false
Controlled open state. Omit for uncontrolled (a trigger opens it).
onOpenChange
(open: boolean) => void
–
Fired when the open state changes (trigger press, scrim tap, Cancel, an action, back/escape).
trigger
string
–
Label for an optional trigger button. When set, the sheet renders the button and opens itself on press (uncontrolled). Omit when you drive open yourself.
title
string
–
Optional header title (a left-aligned primary-label heading on iOS, a short centered heading on web, left-aligned on Android).
message
string
–
Optional header message under the title.
actions *
ActionSheetAction[]
–
The action rows. Each runs its onPress then closes the sheet.
cancelLabel
string
"Cancel"
The Cancel row label (default "Cancel").
embedded
boolean
false
Show the open sheet as a non-modal specimen inside its parent, for a catalogue or a showcase: the stack rests against the parent's bottom edge (the parent gives it its height) over the dim, with no Modal, no rise, no focus trap and no close on Escape, native back or a tap on the dim. Its rows still run their actions. Ignored with trigger, which always opens a live sheet.
testID
string
–
E2E hook forwarded to the root element.
style
StyleProp<ViewStyle>
–
Outer layout composition for the bottom-anchored stack, composed onto the stack container; not a restyle hook. (The device's bottom safe-area inset is applied automatically, so it clears the home indicator without a manual paddingBottom.)

Accessibility and keyboard

Keyboard
Enter
Space
ArrowDown
Opens the menu
ArrowUp
ArrowDown
Moves between items
Home
End
First · last item
Enter
Chooses the item
Escape
Closes, focus returns to the trigger
Semantics
Roles
button
States
disabled
Below the platform minimum, the touch area grows to 44 pt on iOS and 48 dp on Android without moving the layout.
From the docs
iOS accessibility escape and Android system back request cancellation without running an action. An open child overlay handles the request first. Disabled actions do not disable cancellation, and a controlled owner can keep the sheet open. The visible Cancel row remains available to assistive technology.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<ActionSheet
trigger="Add photo"
actions={[
{ label: "Take Photo", onPress: () => {} },
{ label: "Choose from Library", onPress: () => {} }
]}
/>
It poses an optional title and message, lists a set of actions (any of which can be destructive), and offers a Cancel. Selecting an action runs it and closes the sheet; tapping the scrim or Cancel closes it without acting. Pass a trigger label for a self-contained button that opens the sheet, or drive open / onOpenChange yourself. For a small contextual menu anchored to a control, reach for Dropdown or RowMenu instead.
On the web the sheet is two cards a little off the window's edges: a centered header over full-width rows in the accent's ink (a destructive one in the error ink), each under a hairline, and a separate Cancel card. iOS keeps its Liquid Glass sheet with detached capsules, and Android the Material 3 bottom sheet with a drag handle and list rows.
iOS accessibility escape and Android system back request cancellation without running an action. An open child overlay handles the request first. Disabled actions do not disable cancellation, and a controlled owner can keep the sheet open. The visible Cancel row remains available to assistive technology.

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--bad
--bf
--bg2
--fd
--ft
--gl
--ion-tx
--ln
--ln2
--scrim
--sf3
--sh-lg
--tx2
--tx3

Related components