A destructive button that arms on the first press, drains a countdown ring next to a Cancel button and confirms on its own at zero.
Removes the project, its 14 deployments and every environment variable. This cannot be undone.
npx shadcn@latest add https://hyperblur.dev/r/button-countdown-confirm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-countdown-confirm.tsx.
import { ButtonCountdownConfirm } from "@/components/hyperblur/button-countdown-confirm"
<ButtonCountdownConfirm seconds={3} onConfirm={() => deleteProject()}>Delete project</ButtonCountdownConfirm>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Delete project" | Idle label. |
| onConfirm | () => void | Called when the countdown reaches zero, or when the armed button is pressed again. | |
| onCancel | () => void | Called when the user cancels with the Cancel button or Escape. | |
| seconds | number | 3 | Length of the countdown in whole seconds. |
| pendingLabel | string | "Deleting in {s}s" | Label while armed. {s} is replaced by the seconds left. |
| cancelLabel | string | "Cancel" | Label of the cancel button. |
| doneLabel | string | "Deleted" | Label shown briefly after confirming. |
| variant | "solid" | "outline" | "solid" | Surface style. |
| accent | string | "#ff4d5e" | Color of the fill, ring and focus outline. Defaults to a danger red. |
| size | "sm" | "md" | "lg" | "md" | Height, padding and font size preset. |
| defaultArmed | boolean | false | Starts the countdown on mount. |
| loading | boolean | false | Shows a spinner, sets aria-busy and ignores clicks while true. |
| disabled | boolean | false | Dims the button and removes it from interaction. |