Skip to content
Pinky UI

mobile

Quick Action Sheet

A searchable action sheet combines recent and contextual actions so mobile command entry does not depend on a desktop shortcut.

  • mobile
  • actions
  • search
  • sheet
Related pattern

A mobile command equivalent keeps action search close to the thumb while retaining semantic buttons and Escape.

Live preview

Quick usage

usage
import { QuickActionSheet } from "@pinky-ui/systems";

<QuickActionSheet 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.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • 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

Quick Action Sheet is the mobile equivalent of a command entry surface: it opens from a thumb-reachable trigger, filters recent/contextual actions and closes back to its source.

Use when

  • A product has several frequent actions but no reliable desktop shortcut on touch.
  • Recent or contextual actions can narrow the list.

Interaction

Open the sheet, type to filter, choose an action or close with Escape/backdrop/close. The action is a semantic button, not a keyboard-only command.

Accessibility

Label the dialog and input, keep action names complete and restore focus to the trigger. Provide a visible close path.

Reduced motion

Open and close immediately; preserve the query and action order while the sheet is active.

Tune

  • Keep the initial action set short.
  • Put destructive actions behind clear wording and an explicit confirmation.
Open this skill on its own page