Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProDelete without a dialog and make it safe with an announced Undo bar: the item goes at once and the delete is committed only after the undo window passes.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for deletes that can wait a few seconds before they hit the server: drafts, comments, list items, messages. It is faster than asking and forgives mistakes.
Do not use it for deletes that are immediate and irreversible, such as sending a payment or revoking a key. Those need a real confirmation.
It builds on button, which the CLI installs for you.
import { ConfirmDeleteWithUndo } from "@/components/confirm-delete-with-undo"<ConfirmDeleteWithUndo
noun="Draft"
onDelete={() => hide(draft.id)}
onUndo={() => show(draft.id)}
onCommit={() => api.deleteDraft(draft.id)}
>
Delete draft
</ConfirmDeleteWithUndo>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Label of the delete button. |
onDelete | () => void | - | Remove the item from the screen. |
onUndo | () => void | - | Put it back. |
onCommit | () => void | Promise<void> | - | Delete it for real after the window. |
noun | string | Item | What was deleted, for the message. |
timeout | number | 6000 | Milliseconds the undo bar stays. |
| Key | Action |
|---|---|
| Enter or Space on Delete | removes the item and moves focus to Undo |
| Enter or Space on Undo | restores it |
The pattern ships a Testing Library test (confirm-delete-with-undo.test.tsx) that covers deleting with an announcement, committing after the window and undoing without committing.