Undo Action
撤销操作
Aliases:撤销防误操作撤销删除撤回操作后悔药删除可恢复
What is it
Handles risky actions with "apply first, allow regret": deletions take effect immediately and show the result, while a snackbar with a countdown offers one-tap undo until the timer expires. Unlike confirmation dialogs it never interrupts the flow, and unlike a single confirm it leaves a real window to change one's mind.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Destructive but recoverable actions — delete, archive, clear
- High-frequency actions where confirm dialogs would grind the flow
- The result is visible at once and users decide after seeing it
✕ When not to use
- Irreversible actions (permanent delete, send) — undo creates false safety
- Major, infrequent actions deserve a real confirmation dialog
- Background operations with no visible result to inspect
Variants
Snackbar
撤销条
Bottom bar with countdown, the classic Gmail archive pattern
Toast undo
轻提示撤销
Undo inside a toast that auto-dismisses
Delayed commit
延迟提交
UI updates at once; the request only fires after the timer
Implementation
linear-gradientposition: fixedanimationtransformUpdate local state immediately and render an undo bar driven by setTimeout or a CSS linear animation; clicking undo clears the timer and restores the item, while expiry fires the real delete request. Pin the bar to the container bottom and visualize the countdown as a shrinking progress strip. Keep the undo target large and never stack multiple bars of the same kind.
Related concepts
A small message bar that appears in a viewport corner and dismisses itself, reporting an operation result (saved, copied, upload done). Non-blocking, usually with one action (undo, view), lingering for about 3–5 seconds before fading out.
ComponentsUsed withUpdate the interface immediately as if the operation will succeed while the real request runs in the background; settle on success, roll back to the original state with a notice on failure. It solves the "wait for the server on every action" problem — trading brief uncertainty for a zero-latency feel, ideal for frequent light actions like likes and bookmarks.
PatternsSimilarA dialog rendered above the page with a translucent backdrop that interrupts the current flow and demands a task or decision first. The backdrop blocks interaction with the underlying page and focus is temporarily trapped inside — the most disruptive of the overlay containers.
ComponentsUsed withWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsSimilarLayer the information: show only the most common and necessary parts first, hiding secondary details behind "expand", "next step" or "show more" until the user asks for them. It solves the problem of overwhelming users at once — the initial cognitive load stays low and the surface easy to learn, while depth remains available on demand for advanced users.
PatternsSimilar