Components
ActionSheet
Mobile-first bottom sheet presenting a vertical list of actions.
ActionSheet presents a vertical list of actions in a sheet that slides up from
the bottom on mobile and centers at the bottom with a max width on desktop. Pass
actions as a list of entries, each with a label, an onSelect handler, and
optional icon, tone ('default' or 'danger'), and disabled. It is a
portaled modal that dismisses on Escape, backdrop click, the cancel button, or
after an action runs. Controlled via open/onClose.
Example
Preview
import { ActionSheet } from '@officina/ui';
<ActionSheet
open={open}
onClose={() => setOpen(false)}
title="Photo options"
actions={[
{ label: 'Share', onSelect: share },
{ label: 'Delete', tone: 'danger', onSelect: remove },
]}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| actions* | ActionSheetAction[] | — | Action buttons rendered in the sheet. |
| onClose* | () => void | — | Called when the sheet is dismissed. |
| open* | boolean | — | Whether the sheet is visible. |
| cancelLabel | string | Cancel | Label for the cancel button. Defaults to "Cancel". |
| description | string | — | Supporting text under the title. |