Skip to content
Pinky UI

mobile

Long Press Action

A cancellable long press with click, keyboard and context-menu alternatives.

  • mobile
  • long press
  • context
  • touch

Live preview

Idle

Quick usage

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

<LongPressAction onLongPress={select}>{item}</LongPressAction>

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

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for contextual selection or preview where a deliberate hold is useful but not essential.

Use when

Mobile users benefit from a contextual action on a row or media item.

Avoid

Making delete, checkout, or other critical actions reachable only by holding.

Accessibility

Offer click, Enter/Space, and context-menu alternatives; cancel on leave/cancel and label the action.

Keyboard and touch

Duration is configurable, movement/release cancels, and the button remains the semantic source.

Reduced motion and performance

Use one cleaned timer and no permanent animation; optional vibration is host-owned.

Composition and anti-patterns

Pair with a visible menu or selection model for discoverability.

Open this skill on its own page