Button Component

Standard Sizes

Icon-Only Sizes

Basic Usage

import { Button } from '@/components/ui/button'

export function Example() {
  return (
    <div>
      <Button>Click me</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

With Icons

import { Button } from '@/components/ui/button'
import { Download, Send } from 'lucide-react'

<Button leftIcon={<Download />}>
  Download
</Button>

<Button rightIcon={<Send />}>
  Send
</Button>

// Icon only
<Button size="icon">
  <Settings />
</Button>

Loading State

const [loading, setLoading] = useState(false)

<Button
  loading={loading}
  loadingText="Saving..."
  onClick={() => setLoading(true)}
>
  Save Changes
</Button>

As Link (Polymorphic)

import Link from 'next/link'

<Button asChild>
  <Link href="/about">About Us</Link>
</Button>