Skip to content
Pinky UI

mobile

Swipe to Confirm

Makes a consequential action a bounded horizontal gesture with a keyboard and focus fallback.

  • mobile
  • gesture
  • confirm
  • touch
  • keyboard
Related pattern

The gesture communicates commitment through distance, while Enter and Space preserve the same action.

Live preview

Archive projectSwipe →

Swipe right, or focus and press Enter.

Quick usage

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

<SwipeToConfirm label="Archive project" onConfirm={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

  • 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 swipe-to-confirm when commitment should be expressed through bounded distance, while a keyboard and focus path must perform the same action.

Interaction anatomy

  • A track shows progress toward commitment.
  • The threshold is visible before confirmation.
  • Enter and Space provide an explicit non-gesture fallback.

Good for

Reversible archive, publish or handoff actions where distance adds useful intention.

Avoid

Hidden destructive controls, irreversible actions without review or desktop-only workflows.

Live example

Drag the track to the right, or focus it and press Enter.

Usage

tsx
<SwipeToConfirm label="Archive project" onConfirm={archive} />

Tune

Use a generous track, a clear threshold and a reset path. Do not require pixel-perfect dragging.

Accessibility and reduced motion

Expose slider progress, status text and keyboard activation. Reduced motion removes track travel while preserving progress, threshold and confirmation language.

Open this skill on its own page