Cooldown Button
Pro
An ability button with a radial cooldown sweep, a countdown and a pulse when it is ready again.
Click the ability or press Q
Customize
4s
#ff784f
Installation
Cooldown Button is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy cooldown-button.tsx into components/ui and run npm install motion.
Usage
import { CooldownButton } from "@/components/ui/cooldown-button";
<CooldownButton cooldown={4} hotkey="Q" label="Fireball" onActivate={castFireball}>
<FireballIcon />
</CooldownButton>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| cooldown | number | 4 | Cooldown length in seconds. |
| children | ReactNode | — | Icon shown on the button. Defaults to a lightning bolt. |
| onActivate | () => void | — | Called each time the ability is used. |
| color | string | "#ff784f" | Accent color as a hex value. |
| label | string | "Use ability" | Accessible name of the ability. |
| hotkey | string | — | Keyboard key that also triggers the ability, such as "Q". |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion