Components/Button

Button

A button component with multiple design styles. Choose the one that fits your project.

Dependencies: tailwind-merge, clsx, lucide-react

Design 1: Modern Rounded

Clean and minimal with rounded corners. Great for professional applications.

Design 2: Pill Style

Fully rounded buttons with shadow effects. Perfect for modern landing pages.

Design 3: Gradient with Icons

Eye-catching gradient buttons with icon support. Ideal for CTAs and premium UIs.

Usage

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

export default function Example() {
  return (
    <div className="flex gap-4">
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Delete</Button>
      <Button loading>Loading...</Button>
      <Button disabled>Disabled</Button>
    </div>
  );
}