Starts a short countdown with a rolling digit and a strip of LED segments that switch off every half second. Clicking again or pressing Escape aborts before anything happens.
npx shadcn@latest add https://hyperblur.dev/r/button-countdown-abort.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-countdown-abort.tsx.
import { ButtonCountdownAbort } from "@/components/hyperblur/button-countdown-abort"
<ButtonCountdownAbort target="MacBook Pro" seconds={5} onConfirm={wipe} />| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Wipe this device" | Title in the idle state. |
| target | string | "MacBook Pro" | Name of the thing being acted on, shown during the countdown. |
| verb | string | "Erasing" | Verb shown before the target during the countdown. |
| doneLabel | ReactNode | "Device erased" | Title after the countdown ends. |
| abortedLabel | ReactNode | "Wipe cancelled" | Title after aborting. |
| seconds | number | 5 | Countdown length in seconds (1 to 9). |
| onStart | () => void | undefined | Called when the countdown starts. |
| onAbort | () => void | undefined | Called when the countdown is aborted. |
| onConfirm | () => void | undefined | Called when the countdown reaches zero. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 2600 | 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. |