ActionSheet

Bottom-rising sheet of discrete actions (iOS action-sheet pattern) with a Cancel button

Category: overlay · WCAG 2.2-AA · overlay, action-sheet, menu, mobile, sheet

States

open
closed

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the component is open (controlled).
`defaultOpen`	`boolean`	—	Whether the component is open on first render (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	—	Called with the next open state when it changes.
`actions`	`ActionSheetAction[]`	—	Choices, each with a label, onSelect, and optional destructive/disabled flags
`title`	`React.ReactNode`	—	Title text for the component.
`description`	`React.ReactNode`	—	Supporting description text.
`showCancel`	`boolean`	`true`	When true, shows a cancel button below the actions.
`labels`	`{ cancel?: string; label?: string }`	—	Overrides for the component’s user-visible strings (i18n).
`className`	`string`	—	Additional CSS class names merged onto the root element.

Design tokens

--cascivo-color-surface
--cascivo-color-border
--cascivo-color-accent
--cascivo-color-destructive
--cascivo-color-text
--cascivo-color-text-subtle
--cascivo-color-text-muted
--cascivo-radius-overlay
--cascivo-shadow-overlay
--cascivo-motion-enter
--cascivo-motion-exit
--cascivo-z-overlay

When to use

A short list of discrete actions on a touch surface, rising from the bottom
Confirming or choosing among a few operations (e.g. Share, Edit, Delete) on mobile
A mobile-first alternative to an anchored dropdown menu when there is no trigger anchor

When not to use

A single yes/no confirmation — use AlertDialog
A form or scrollable content — use BottomSheet or Sheet
A menu anchored to a trigger on desktop — use Menu or Dropdown

How to build an accessible ActionSheet in React →

Examples

Basic

<ActionSheet
  open={isOpen}
  onOpenChange={setIsOpen}
  title="Share photo"
  actions={[
    { label: 'Copy link', onSelect: copyLink },
    { label: 'Delete', onSelect: remove, destructive: true },
  ]}
/>

Without cancel button

Escape and outside press still dismiss the sheet.

<ActionSheet defaultOpen showCancel={false} actions={[{ label: "Archive", onSelect: archive }]} />

Related components

BottomSheet — Use BottomSheet for rich/resizable content; ActionSheet is a fixed list of actions
Menu — Use Menu for a trigger-anchored dropdown on pointer-first surfaces

← Back to docs