Skip to content
Pinky UI

mobile

Hold-to-Reveal Actions

Holding a primary action reveals secondary choices in place, with a visible Cancel state and keyboard fallback.

  • mobile
  • long press
  • actions
  • reveal
  • touch
Related pattern

Secondary actions are revealed by sustained intent but remain cancellable and available through keyboard activation.

Live preview

Hold to reveal · tap the visible action to cancel

Quick usage

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

<HoldToRevealActions label="Publish" 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

Hold-to-Reveal Actions exposes secondary choices after sustained intent on a primary action. A visible Cancel state, Escape and keyboard activation keep the action safe for touch and non-touch users.

Use when

  • Secondary actions are useful but would clutter the resting control.
  • Sustained intent is a meaningful distinction from an ordinary tap.

Interaction

Tap the primary action to run it, hold to reveal secondary actions, choose one, or tap Cancel. Escape closes the revealed state.

Accessibility

Use a real button with aria-expanded and keep every revealed action keyboard reachable. The hold gesture must never be the only way to access the secondary actions.

Reduced motion

Reveal the action row immediately when the hold threshold is met; remove fan or stack travel.

Tune

  • Use this for low-frequency secondary actions, not for basic navigation.
  • Keep the duration consistent with other long-press patterns.
Open this skill on its own page