Preview
HighlightButton
Interactive
Custom Colors
Custom Colors
Interactive
Install
Add the item with the shadcn CLI.
npx shadcn@latest add @evilbuttons/highlight-buttonUsage
import { HighlightButton } from "@/components/evil-buttons/highlight-button";
export function ButtonDemo() {
return (
<HighlightButton>Click Me</HighlightButton>
);
}
export function CustomColorsDemo() {
return (
<HighlightButton
highlightColor="rgba(59, 130, 246, 0.65)"
borderColor="rgba(59, 130, 246, 0.8)"
>
Blue Glow
</HighlightButton>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "default" | Button variant style. |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Button size. |
highlightColor | string | "color-mix(in oklab, currentColor 55%, transparent)" | Color of the mouse-following highlight and click ripple. |
highlightSize | number | 56 | Diameter of the highlight glow in pixels. |
borderColor | string | "color-mix(in oklab, currentColor 58%, transparent)" | Border color when hovering. |
className | string | - | Extra classes passed to the button. |
children | React.ReactNode | - | The visible button label or content. |
All other <button> attributes (onClick, disabled, type, etc.) are forwarded.
Registry
The registry item includes components/evil-buttons/highlight-button.tsx and installs clsx and tailwind-merge as dependencies. The component imports cn from @/lib/utils.