Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA bottom action sheet for one item's actions on a phone with large rows, destructive actions styled, disabled ones kept visible and Cancel always present.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this on touch screens for the overflow menu of a list row, a photo or a message, where a dropdown would be too small to hit.
Do not use it on desktop-only screens (use a dropdown menu) or for more than seven actions.
It builds on button and sheet, which the CLI installs for you.
import { SheetActionList } from "@/components/sheet-action-list"<SheetActionList
trigger={<Button variant="outline">Photo options</Button>}
title="IMG_2041.jpg"
actions={[
{ id: "delete", label: "Delete", destructive: true, onSelect: remove },
]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
trigger | ReactNode | - | Opens the sheet. |
title, description | string | - | Names the sheet and its subject. |
actions | { id, label, icon?, destructive?, disabled?, onSelect }[] | - | The rows, in order. |
| Key | Action |
|---|---|
| Tab | through the actions and Cancel |
| Enter or Space | runs an action and closes |
| Escape | closes |
The pattern ships a Testing Library test (sheet-action-list.test.tsx) that covers the titled dialog, running an action, disabled and destructive rows and Cancel with focus return.