Deleting blurs the button away and slides in a toast with a draining bar, an Undo button and a Cmd+Z shortcut. If the window runs out the deletion is committed.
npx shadcn@latest add https://hyperblur.dev/r/button-delete-undo.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-delete-undo.tsx.
import { ButtonDeleteUndo } from "@/components/hyperblur/button-delete-undo"
<ButtonDeleteUndo onDelete={hide} onUndo={restore} onCommit={purge}>Delete 3 emails</ButtonDeleteUndo>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Delete 3 emails" | Button label. |
| message | ReactNode | "3 emails deleted" | Toast text while undo is possible. |
| undoLabel | string | "Undo" | Undo button label. |
| restoredLabel | ReactNode | "Emails restored" | Toast text after undoing. |
| committedLabel | ReactNode | "Deleted permanently" | Toast text after the window ends. |
| undoWindow | number | 5000 | Milliseconds the user has to undo. |
| onDelete | () => void | undefined | Called on the first click, when the item should be hidden. |
| onUndo | () => void | undefined | Called when the user undoes. |
| onCommit | () => void | undefined | Called when the undo window ends. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 2200 | Milliseconds before the finished state returns to the start. Use 0 to keep the finished state. |
| disabled | boolean | false | Blocks every interaction and dims the control. |