Skip to content
Pinky UI

Undoable Action

Remove a reversible object now while preserving a short, keyboard-accessible path to restore its identity and position.

Live example

Try the interaction before reading the recipe.

real component · keyboard-safe

  • Project briefUpdated today
  • Release notesDraft

Removing an item closes the gap before the Undo surface arrives.

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.

Source: packages/skills/feedback/undoable-action.md