Preview

HighlightButton

Interactive

Custom Colors

Custom Colors

Interactive

Install

Add the item with the shadcn CLI.

npx shadcn@latest add @evilbuttons/highlight-button

Usage

[]txt
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

PropTypeDefaultDescription
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.
highlightColorstring"color-mix(in oklab, currentColor 55%, transparent)"Color of the mouse-following highlight and click ripple.
highlightSizenumber56Diameter of the highlight glow in pixels.
borderColorstring"color-mix(in oklab, currentColor 58%, transparent)"Border color when hovering.
classNamestring-Extra classes passed to the button.
childrenReact.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.