Skip to content
Pinky UI

feedback

Action Undo Bar

A temporary recovery surface for reversible actions.

  • feedback
  • undo
  • recovery
  • action
Variation of

Use Undoable Action when the removed object must reflow and return to its original position. Open Undoable Action

Live preview

Task archived

Quick usage

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

<ActionUndoBar message="Item deleted" onUndo={restore} />

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 after a reversible action when the user needs a short recovery window.

Use when

Archive, remove, or move actions can be safely reversed without hiding the affected object.

Avoid

Destructive actions with no reliable undo, or a countdown that creates unnecessary pressure.

Accessibility

Announce the action once, focus the Undo control only when appropriate, and make expiry understandable.

Keyboard and touch

Undo is a real button; do not require swipe or timing precision.

Reduced motion and performance

Do not animate the countdown continuously; clean expiry timers on unmount.

Composition and anti-patterns

Use Inline Feedback for a local save and Toast for a message that is not reversible.

Open this skill on its own page