Preview
Props
Install
npx shadcn@latest add @evilbuttons/troll-buttonUsage
import TrollButton from "@/components/evil-buttons/troll-button";
export function ButtonDemo() {
return (
<TrollButton giveUpAfter={3000} onClick={() => console.log("Caught it")}>
Click If You Can
</TrollButton>
);
}Variants
Stubborn
A long chase over a wide area before it gives in.
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button label. Falls back to label. |
label | React.ReactNode | "Click Me" | Label used when no children are provided. |
surrenderLabel | React.ReactNode | "Fine, click me" | Label shown once the button gives up. |
giveUpAfter | number | 3500 | Milliseconds of chasing before it gives up. The timer starts on the first dodge. |
fleeRadius | number | 56 | How close in px the cursor can get to the button's edge before it dodges. |
range | number | 140 | Maximum distance in px it strays from its resting spot. |
resetAfter | number | 1500 | Milliseconds after a successful click before it starts fleeing again. 0 keeps it caught. |
onClick | (event) => void | - | Only fires once the button has given up. |
className | string | - | Extra classes passed to the button. |
Good to know
- On touch, taps make it dodge instead.
- Keyboard clicks always go through.
prefers-reduced-motionturns the fleeing off.