Preview
Props
Install
npx shadcn@latest add @evilbuttons/highlight-buttonUsage
import { HighlightButton } from "@/components/evil-buttons/highlight-button";
export function ButtonDemo() {
return <HighlightButton variant="outline">Click Me</HighlightButton>;
}Variants
Custom colors
Any CSS color works for the spotlight and the border.
Props
The component spreads native button props and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | The button label or content. |
variant | "default" | "secondary" | "outline" | "default" | Surface style of the button. |
highlightColor | string | "color-mix(in oklab, currentColor 28%, transparent)" | Color of the cursor spotlight and click ripple. |
highlightSize | number | 90 | Radius in px of the cursor spotlight. |
borderColor | string | "color-mix(in oklab, currentColor 75%, transparent)" | Color the border lights up with near the cursor. |
className | string | - | Extra classes passed to the button. |
Good to know
- Pointer moves never re-render the component.
- The lit border follows the button's radius.