Button Components

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  // Variant style
  variant?:
    | 'default'    // Gray background, white text
    | 'cta'        // Primary blue, white text
    | 'secondary'  // Secondary color, white text
    | 'success'    // Green background, black text
    | 'warning'    // Orange background, dark text
    | 'premium'    // Juicy orange, black text
    | 'error'      // Red background, white text
    | 'outline'    // Transparent with border
    | 'header'     // Transparent, blue text

  // Size
  size?:
    | 'default'    // 48px height (h-12)
    | 'small'      // 32px height (h-8)

  // Icon
  icon?: React.ReactNode          // Icon element (e.g., from lucide-react)
  iconPosition?: 'left' | 'right' // Icon position (default: 'left')

  // State
  loading?: boolean               // Shows spinner when true
  disabled?: boolean              // Disables button interaction

  // Standard HTML button props
  onClick?: (e: React.MouseEvent) => void
  type?: 'button' | 'submit' | 'reset'
  className?: string
  children?: React.ReactNode
  // ... all other HTML button attributes
}

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

function MyComponent() {
  return (
    <div className="flex gap-4">
      <Button variant="cta">Click me</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
    </div>
  )
}

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

function MyComponent() {
  const handleConfirm = () => {
    // Your logic here
    console.log('Confirmed!')
  }

  return (
    <Button variant="success" onClick={handleConfirm}>
      Confirm
    </Button>
  )
}

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

function MyForm() {
  return (
    <div className="max-w-md space-y-3">
      <Button className="w-full" variant="cta">
        Continue
      </Button>
      <Button className="w-full" variant="outline">
        Go Back
      </Button>
    </div>
  )
}

import { Button } from '@/components/ui/button'
import { Crown, ChevronRight, X } from 'lucide-react'

function MyComponent() {
  return (
    <>
      <Button icon={<Crown />} variant="premium">
        Upgrade
      </Button>

      <Button icon={<ChevronRight />} iconPosition="right" variant="cta">
        Next Step
      </Button>

      <Button icon={<X />} size="small" variant="error">
        Delete
      </Button>
    </>
  )
}

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

function MyComponent() {
  const [isLoading, setIsLoading] = useState(false)

  const handleSubmit = async () => {
    setIsLoading(true)
    try {
      await saveData()
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <Button loading={isLoading} variant="cta" onClick={handleSubmit}>
      Save Changes
    </Button>
  )
}