mobile
Action Sheet
A flat list of actions for one object, with an explicit Cancel — the classic iOS action sheet.
- mobile
- actions
- sheet
- cancel
One flat list of choices with Cancel; Detent Sheet holds arbitrary content and Quick Action Sheet is searchable command entry.
Live preview
Quick usage
import { ActionSheet } from "@pinky-ui/systems";
<ActionSheet open={open} onOpenChange={setOpen} title="Photo" actions={actions} />Install
Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add action-sheetPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
- State remains readable without relying on colour or motion.
Performance
- Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
- Timers and listeners are cleaned up on unmount.
Reduced motion
The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.
When to use
- Touch-first product surfaces where the next action should stay close to the hand.
When not to use
- Desktop-only workflows or interactions whose gesture would hide the only available action.
Skill
Purpose
The classic iOS action sheet: a flat list of actions for one named object, with an explicit Cancel. Not a generic sheet shell — it exists to answer "what can I do with this thing," nothing more.
Use when
A single object (a photo, a message, a row) has two to five discrete actions and the choice should feel local and dismissible, not like navigating to a new surface.
Avoid
- Arbitrary content or forms — that's Detent Sheet or Content-Aware Sheet
- Searchable command entry — that's Quick Action Sheet
- A single action — use a button or Hold to Confirm for destructive ones
Interaction
Opens from the bottom with a spring settle. Tapping an action runs it and closes the sheet. The Cancel button, the scrim and Escape all close without running anything.
Accessibility
role="dialog" with aria-modal, focus moves to the first action on open and returns to the trigger on close. Escape and the scrim both dismiss. Destructive actions are marked by colour but the label itself always says what happens — colour is never the only signal.
Reduced motion
The sheet appears and disappears without the spring travel; the action list and Cancel button remain exactly the same.
Composition and anti-patterns
Don't nest an Action Sheet inside a Dialog or another sheet — pick one modal surface per interaction. Keep the action list short; past five items, consider Quick Action Sheet or a dedicated screen instead.