Answers for "Reusable Button component with React typescript and Tailwind"

Reusable Button component with React typescript and Tailwind

import React from 'react';

import 'assets/scss/component/_buttons.scss'

type ButtonProps = {
  className?: string;
  type: string;
  size?: string;
  disabled?: boolean;
  block?: boolean;
  href?: string;
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
}

const Button: React.FC<ButtonProps> = ({ children, className, type, size, disabled, block, href, onClick }) => {

  const getClasses = () => {
    return `btn btn-${type} btn-${size}${block ? ' btn-block' : ''}${disabled ? ' is-disabled' : ''}${className ? ' '+className : ''}`;
  }

  return (
    <>
      {href ? 
        <a href={href}
          className={getClasses()}
        >
          {children}
        </a>
        :
        <button 
          className={getClasses()}
          onClick={onClick}
          disabled={disabled}
        >
          {children}
        </button>
      }
    </>
  );
}

Button.defaultProps = {
  size: 'md'
}

export default Button;

//and add tailwind classes in your scss file 
@layer components {
  .btn {
    @apply inline-block font-medium hover:border-opacity-75 hover:bg-opacity-75;
  }

  .btn-block {
    @apply block w-full text-center;
  }

  .btn-sm {
    @apply py-1.5 px-3 text-sm rounded-sm;
  }

  .btn-md {
    @apply py-2 px-4 text-base rounded;
  }

  .btn-lg {
    @apply py-2.5 px-6 text-lg rounded-md;
  }

  .btn-primary {
    @apply border border-purple-600 bg-purple-600;
  }

  .btn-secondary {
    @apply border border-green-500 bg-green-500;
  }
}