CooldownButton fires your action, then refuses to cooperate again until a cooldown elapses. A radial sweep drains across the face while a rotating taunt counts down the seconds, so users get clear feedback instead of hammering a dead button. It is rate limiting and double-submit protection, with attitude.
Preview
Props
Variants
Longer leash
Tune cooldown and supply your own taunts.
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/cooldown-buttonUsage
import { CooldownButton } from "@/components/evil-buttons/cooldown-button";
export function ButtonDemo() {
return (
<CooldownButton cooldown={3000} onClick={() => sendRequest()}>
Send it
</CooldownButton>
);
}Props
The component spreads any <button> HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Idle label. Falls back to label. |
label | React.ReactNode | "Send it" | Idle label used when no children are provided. |
cooldown | number | 3000 | Lockout duration in milliseconds after each click. Set to 0 to disable the cooldown. |
taunts | string[] | 5 defaults | Pool of messages; one is picked at random per cooldown. |
showCountdown | boolean | true | Append the remaining whole seconds to the taunt while locked. |
onClick | (e) => void | - | Fires immediately on a valid click, before the cooldown begins. |
className | string | - | Extra classes passed to the button. |
Notes
- Shares MinimalButton's graded dark surface and springy press, and accepts any native
<button>attribute. - The button is
disabledfor the full cooldown, so it cannot be double-submitted; clicks during the lockout are ignored. - The conic-gradient sweep is driven by a Motion value via
useMotionTemplate, draining 360deg to 0deg over the cooldown for smooth, accurate progress. - Call
e.preventDefault()insideonClickto fire the action without starting a cooldown. - The sweep animation is skipped when the user prefers reduced motion, and
data-state(idle|cooldown) is exposed for styling.
Registry
The registry item includes components/evil-buttons/cooldown-button.tsx, installs clsx, tailwind-merge, and motion.