Skip to content
Pinky UI

lists

Swipe Action Row

A mobile row that reveals actions while keeping an explicit actions button.

  • lists
  • swipe
  • mobile
  • actions

Live preview

Team notes · updated 4m ago

Quick usage

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

<SwipeActionRow actions={actions}>{row}</SwipeActionRow>

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 a mobile row gesture to reveal secondary actions without hiding those actions from other users.

Use when

Archive, delete, or more actions are frequent and row density matters.

Avoid

Critical actions that require a hidden swipe or destructive action without confirmation.

Accessibility

Keep an explicit actions button, label destructive actions, and preserve row semantics.

Keyboard and touch

Swipe has a threshold and snap-back; buttons provide the keyboard and desktop path.

Reduced motion and performance

Use transform animation and snap immediately under reduced motion.

Composition and anti-patterns

Use Action Undo Bar after reversible archive/delete and keep content independently actionable.

Open this skill on its own page