Tailwind Button

Button.tsx

import classNames from 'classnames'
import cn from 'variant-classnames'

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
type Color = 'stone' | 'indigo' | 'error'

const variants = {
  size: {
    xs: 'gap-x-1 px-2 py-1 text-xs',
    sm: 'gap-x-1.5 px-2 py-1 text-sm',
    md: 'gap-x-1.5 px-2.5 py-1.5 text-sm',
    lg: 'gap-x-2 px-3 py-2 text-sm',
    xl: 'gap-x-2 px-3.5 py-2.5 text-sm',
  },
  color: {
    stone: 'border-stone-200 bg-stone-50 text-dark hover:bg-stone-100',
    indigo: 'bg-indigo-600 hover:bg-indigo-500 text-white',
    error: 'bg-red-400 border-red-100 text-white',
  },
  disabled: {
    true: 'opacity-50 cursor-not-allowed',
  },
}

interface ButtonProps extends React.ComponentProps<'button'> {
  size?: Size
  color?: Color
}

export const Button = ({
  children,
  className,
  size = 'md',
  color = 'stone',
  disabled,
  ...props
}: ButtonProps) => {
  const variant = cn(variants, { size, color, disabled })
  return (
    <button
      className={classNames(
        'relative inline-flex items-center rounded-md border font-semibold focus:z-10 focus:border-indigo-300 focus:outline-none focus:ring-1 focus:ring-indigo-300',
        variant,
        className,
      )}
      disabled={disabled}
      {...props}
    >
      {children}
    </button>
  )
}