KQ-521 · UNDO/TOAST

Undo Toast

A toast with an action and a countdown. It rises on recoil, whose two bounces read as something landing on the stack, while a ring beside the message drains linearly across the duration; hovering or focusing stops the ring where it stands and leaving resumes it from there. Taking the action cross-fades the panel to a restored line and lifts it away on the exit ease, and the action is a real button one Tab from the message.

KQ-521 · UNDO/TOAST

Coldbrook inbox4

Bench 4 recalibrated
Waylight ops
Weekly digest
Fieldline
Sensor 12 drifting
Gaugeworks
Invoice 4471
Basinworks

Inbox 4 of 4

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/undo-toast

Props

open: boolean; default —; Shows the toast. Raise it after the edit has already been applied.
message: string; default —; What was done — one short line, past tense.
actionLabel: string; default "Undo"; Action copy.
duration: number; default 5000; Milliseconds until it dismisses itself; 0 or less keeps it up.
onAction: () => void; default —; Fires when the action is taken — restore the thing here.
onDismiss: () => void; default —; Fires when the ring runs out, the toast is closed, or a restore finishes.
className: string; default —; Overrides the default bottom-centre placement inside the nearest relative parent.

Prop	Type	Default	Description
open	boolean	—	Shows the toast. Raise it after the edit has already been applied.
message	string	—	What was done — one short line, past tense.
actionLabel	string	"Undo"	Action copy.
duration	number	5000	Milliseconds until it dismisses itself; 0 or less keeps it up.
onAction	() => void	—	Fires when the action is taken — restore the thing here.
onDismiss	() => void	—	Fires when the ring runs out, the toast is closed, or a restore finishes.
className	string	—	Overrides the default bottom-centre placement inside the nearest relative parent.