Undo Snackbar
A removed row leaves a bar behind, and a hairline drains across it toward the point of no return.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Undo Snackbar
*
* A destructive action leaves a snackbar behind: a hairline drains
* across the bar toward the point of no return, and taking the undoAbout this pattern
The safety net under a destructive action. The bar arrives on a short travel, and a line drains across its bottom edge for exactly as long as the reversal is still possible — the deadline is drawn rather than guessed at. Taking the undo removes the line instead of freezing it, because the moment the action is reversed the deadline no longer exists, and the label swaps in place to say so before the bar withdraws. The two states share one grid cell so the wider of them is reserved up front: the swap cannot reflow the bar, and the sentence never moves sideways while it changes.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Issue tracker
Deleting an issue leaves a bottom bar holding a timed reversal open.
Related patterns
- Toast Slide InA toast slides in from the edge, rests while a thin line counts down, then leaves the way it came.
- Connection RestoredThe offline bar turns green, confirms, and retracts in one continuous move.
- Queue Position AdvanceYour place in line steps down, the figure swapping upward as the bar of people ahead shortens.