Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn alert dialog whose destructive button unlocks after a countdown that restarts each time it opens; use this when a rushed click is the main risk.
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 when a rushed click is the main risk: wiping backups, revoking every key, deleting a workspace someone else owns. The countdown makes people read the dialog before they can act.
Do not use it for routine actions, where a wait is only annoying. For actions that need the person to prove they know what they delete, use confirm-destructive-action (typed name) instead.
It builds on alert-dialog and button, which the CLI installs for you.
import { ConfirmWithCountdown } from "@/components/confirm-with-countdown"<ConfirmWithCountdown
seconds={5}
title="Delete all backups?"
actionLabel="Delete backups"
onConfirm={deleteBackups}
>
<Button variant="destructive">Delete backups</Button>
</ConfirmWithCountdown>| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The trigger. |
onConfirm | () => void | - | Runs when the unlocked action is pressed. |
seconds | number | 5 | Seconds the action stays locked. |
title, description | ReactNode | - | Dialog text. |
actionLabel | string | Delete | Label of the action; the countdown is appended while locked. |
role="alertdialog", trapped focus, focus returns to the trigger.| Key | Action |
|---|---|
| Tab | moves between Cancel and the action |
| Escape | cancels |
The pattern ships a Testing Library test (confirm-with-countdown.test.tsx) that covers the locked label with the seconds left, unlocking and confirming, and the restart on reopening.