Skip to content
Pinky UI

mobile

Mobile Undo Bar

A reversible action closes its gap and exposes a thumb-reachable undo surface that restores the exact item.

  • mobile
  • feedback
  • undo
  • reflow
Related pattern

The recovery surface belongs to the reflowing list and keeps the removed object recoverable.

Live preview

Research note
Release brief
Motion audit

Quick usage

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

<MobileUndoBar />

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

Mobile Undo Bar keeps a reversible action close to the list that changed. The item closes its gap, while a lower action surface restores the exact object before the recovery window expires.

Use when

  • A list action is reversible for a short time.
  • Restoring the object's original position matters.

Interaction

Archive an item, press Undo or let the recovery surface expire. The result remains written beside the action.

Accessibility

Announce the archive state politely and expose Undo as a normal button with a clear label. Do not require a swipe to recover content.

Reduced motion

Remove and restore the row immediately while preserving the same order and announcement.

Tune

  • Give users enough time to find Undo.
  • Use a durable confirmation for irreversible actions instead.
Open this skill on its own page