Undo Toast
A function that shows a toast with Undo and resolves whether the action should run.
// Nothing has run yet
npx shadcn@latest add @sureui/undo-toast
It needs the shadcn Toaster in your root layout. See Installation.
import { undoToast } from "@/components/ui/sureui/undo-toast"if (await undoToast("Moved 3 files to the trash")) { await deleteFiles(ids)}It resolves true when the toast closes and false on Undo.
Description
description adds a second line under the message.
// Nothing has run yet
Duration
The window lasts 5 seconds, or the milliseconds you pass to duration, between 4 and 60 seconds.
// Nothing has run yet
With duration: "manual", the toast stays until people press Undo or dismiss it. It shows Sonner's close button, and there is no countdown.
Pausing
The window pauses while the toast is hovered or focused, and while the tab is hidden. This one sets pauseUndoOnHover and pauseUndoOnFocus to false.
// Nothing has run yet
undoToast(message, options)
Returns a Promise<boolean>.
| Prop | Type | Default |
|---|---|---|
| message | ReactNode | required |
| description | ReactNode | — |
| duration | number | "manual" | 5000 |
| undoLabel | ReactNode | "Undo" |
| pauseUndoOnHover | boolean | true |
| pauseUndoOnFocus | boolean | true |
- Sonner shows toasts in a polite live region, so the message is announced.
- Sonner's hotkey, Alt+T by default, moves focus to the toasts, and focus there pauses the window.
- With
prefers-reduced-motion, the countdown on Undo doesn't move and clears when the window ends.
WCAG
- 2.2.1 Timing Adjustable:
duration: "manual"meets it, since the toast has no time limit. A numericdurationstops at 60 seconds.