Button

A versatile button with multiple variants, sizes, and animation effects.

Basic Usage

import { Button } from "@/components/Button";

<Button>Click me</Button>;

Variants

<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

Sizes

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">🔍</Button>

Effects

<Button effect="ringHover">Ring Hover</Button>
<Button effect="shine">Shine</Button>
<Button effect="shineHover">Shine Hover</Button>
<Button effect="gooeyRight">Gooey Right</Button>
<Button effect="gooeyLeft">Gooey Left</Button>

With Icons

<Button icon={ArrowLeft} iconPlacement="left">
  Previous
</Button>

<Button icon={ArrowRight} iconPlacement="right">
  Next
</Button>

Disabled

<Button disabled>Disabled Button</Button>

As Link

import Link from "next/link";

<Button asChild>
  <Link href="/docs">View Docs</Link>
</Button>;