Function Button

docs/src/components/Examples/ButtonExamples.tsx:33–86

({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  icon,
  iconElement,
  className = '',
  ...props
}: ButtonProps)

}

function Button({
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  children,
  icon,
  iconElement,
  className = '',
  ...props
}: ButtonProps) {
  const baseClasses =
    'inline-flex items-center justify-center font-medium rounded-md transition-[background-color,opacity,border-color] duration-200 focus:outline-none focus-visible:ring-2 disabled:opacity-50 disabled:cursor-not-allowed'

  const variants = {
    primary:
      'bg-accent text-white hover:opacity-90 focus-visible:ring-accent/40',
    secondary:
      'bg-background-secondary text-text border border-border hover:bg-fill focus-visible:ring-accent/40',
    outline:
      'border border-border text-text hover:bg-fill focus-visible:ring-accent/40',
    ghost: 'text-text hover:bg-fill focus-visible:ring-accent/40',
    destructive: 'bg-red text-white hover:opacity-90 focus-visible:ring-red/40',
  }

  const sizes = {
    sm: 'text-xs h-6 px-2 gap-1.5',
    md: 'text-[13px] h-7 px-2.5 gap-1.5',
    lg: 'text-sm h-8 px-3.5 gap-2',
  }

  const iconSizes = {
    sm: 'w-3 h-3',
    md: 'w-3.5 h-3.5',
    lg: 'w-4 h-4',
  }

  return (
    <button
      className={`${baseClasses} ${variants[variant]} ${sizes[size]} ${className}`}
      disabled={disabled || loading}
      {...props}
    >
      {loading && <Loader2 className={`${iconSizes[size]} animate-spin`} />}
      {!loading && iconElement && icon === 'left' && (
        <span className={iconSizes[size]}>{iconElement}</span>
      )}
      <span>{children}</span>
      {!loading && iconElement && icon === 'right' && (
        <span className={iconSizes[size]}>{iconElement}</span>
      )}
    </button>
  )
}

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