Action sheet

A short list of actions or choices from the bottom edge — the touch idiom for what a desktop puts in a Menu. Each row is a full-width 44px tap target, destructive actions read in the danger tone, and picking one closes the sheet. Built on BottomSheet.

<ActionSheet  title="Project"  trigger={<Button iconOnly size="touch" aria-label="More"><MoreHorizontal /></Button>}  items={[    { key: 'duplicate', label: 'Duplicate', onClick: duplicate },    { key: 'discard', label: 'Discard draft', tone: 'danger', onClick: discard },  ]}/>

Live

Tap the header ⋯ in the form skeleton to raise the action sheet.

Props

Prop	Type	Default	Notes
`items`	`{ key, label, icon?, tone?, onClick, disabled? }[]`	—	The actions.
`trigger`	`ReactElement`	—	Element that opens the sheet.
`open / onOpenChange`	`boolean / fn`	—	Drive it yourself instead of a trigger.
`title / description`	`ReactNode`	—	Optional header.
`cancelLabel`	`string \| null`	`'Cancel'`	Trailing cancel row; null omits it.