Skip to content
Pinky UI

mobile

Swipe Actions

A row reveals an action at a snap threshold and commits only after a farther threshold, with a visible button alternative.

  • mobile
  • swipe
  • row
  • threshold
  • actions
Related pattern

Reveal and commit are separate distances, so a partial swipe can be cancelled instead of accidentally firing.

Live preview

Archive project

Swipe left, or use the action.

Swipe partially to reveal, further to commit.

Quick usage

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

<SwipeActions label="Archive project" actionLabel="Archive" onAction={archive} />

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

Swipe Actions separates a partial reveal from a committed row action. The row snaps to a readable action state, and only a farther threshold commits; the visible action button is always available.

Use when

  • A list row has one frequent secondary action.
  • The action can be safely cancelled before commitment.

Interaction

Swipe partially to reveal, release to snap, swipe farther to commit, or use the action button. A vertical page scroll should not be captured by a mostly vertical gesture.

Accessibility

Expose the action as a real button and announce reveal/commit status in text. Keep the row label and action name together for screen readers.

Reduced motion

Jump between resting, revealed and committed positions without horizontal travel.

Tune

  • Use a reveal threshold smaller than the commit threshold.
  • Keep action count low; use a menu for larger action sets.
Open this skill on its own page