feedback
Undoable Action
Removes an item and closes the gap while a bounded recovery surface restores the exact item position.
- feedback
- undo
- reflow
- recovery
- destructive
The recoverable object and its spatial reflow are the interaction, not a toast skin.
Live preview
- Project briefUpdated today
- Release notesDraft
Removing an item closes the gap before the Undo surface arrives.
Quick usage
import { UndoableAction } from "@pinky-ui/systems";
<UndoableAction items={items} 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.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add undoable-actionPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devAccessibility
- 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
Remove a reversible object now while preserving a short, keyboard-accessible path to restore its identity and position.
Use when
Archive, remove or move actions can be safely reversed and the surrounding list should close the gap immediately.
Avoid
Irreversible deletion, long-lived history or a timer that pressures the user for routine work.
Accessibility
Announce what changed once, give the Undo control a specific name, and communicate expiry in text rather than color or motion alone.
Keyboard and touch
Undo is a real button and remains reachable on narrow screens. Do not make swipe or timing precision the only recovery path.
Reduced motion and performance
Resolve list reflow without travel when motion is reduced. Clean the expiry timer on unmount and do not retain removed objects after the window closes.
Composition and anti-patterns
The item should disappear and the surrounding layout should reflow before the recovery surface appears. A static toast with no object restoration is only an Action Undo Bar preset.