Sheet 03 · Components

Undo

Act right away and give people a few seconds to take it back.

Fig. 01

Await log waiting for you to try it

Installation

npx shadcn add @sureui/confirm-button

npx shadcn add @sureui/undo-toast

Usage

<ConfirmButton undo onConfirm={moveToTrash}>  Move to trash</ConfirmButton>if (await undoToast("Moved 3 files to trash")) {  await deleteFiles(ids)}

How it behaves

Nothing runs until the window ends: 5 seconds by default, or the number you pass, at least 4 seconds.
Undo calls onCancel, and onConfirm never runs.
If someone leaves the button and comes back to it, by pointer or keyboard, the window pauses until they leave again. Turn this off with pauseUndoOnHover={false} or pauseUndoOnFocus={false}.
Unmounting the control during the window drops the action without calling either handler. Closing the tab does the same.
undoToast pauses while the toast is hovered or has keyboard focus, and while the tab is hidden. Turn this off with pauseOnHover: false or pauseOnFocus: false.
Keep a trash or history view too, so people can still restore things after the window closes.

Props

Name	Type	Default
undo	boolean \| number	5000 when true, min 4000
undoLabel	ReactNode	"Undo"
announcements.undo	string	"Done. Undo is available."
pauseUndoOnHover	boolean	true
pauseUndoOnFocus	boolean	true
onConfirm	() => void \| Promise<unknown>	required
onCancel	() => void	—
data-state	"idle" \| "armed" \| "holding" \| "undo" \| "pending"	"idle"

undo: boolean | number; Default: 5000 when true, min 4000
undoLabel: ReactNode; Default: "Undo"
announcements.undo: string; Default: "Done. Undo is available."
pauseUndoOnHover: boolean; Default: true
pauseUndoOnFocus: boolean; Default: true
onConfirm: () => void | Promise<unknown>; Default: required
onCancel: () => void; Default: —
data-state: "idle" | "armed" | "holding" | "undo" | "pending"; Default: "idle"

When to use it

Use it when

Reach for something else when