button.base.tsx

import * as React from 'react';
import { forwardRef } from 'react';

export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  size?: 'small' | 'medium' | 'large';
}

const ButtonBase = forwardRef<HTMLButtonElement, IButton>(
  ({ className, size = 'medium', type = 'button', ...rest }, forwardedRef) => {
    const isBase = !Boolean(className);

    return (
      <button
        className={`appearance-none border border-transparent border-solid rounded font-bold add-transition hover:duration-100 focus:outline-none focus:shadow-outline focus:duration-100 disabled:cursor-not-allowed ${
          size === 'small'
            ? ' px-3 py-1 text-xs'
            : size === 'medium'
            ? ' px-4 py-1 text-sm'
            : size === 'large'
            ? ' px-8 py-2 text-sm'
            : ''
        } ${isBase ? 'bg-border border-text' : className}`}
        type={type}
        {...rest}
        ref={forwardedRef}
      />
    );
  }
);

export default ButtonBase;

button.primary.tsx

import * as React from 'react';
import { forwardRef } from 'react';
import ButtonBase, { IButton } from './button.base';

const ButtonPrimary = forwardRef<HTMLButtonElement, IButton>(({ className, ...rest }, forwardedRef) => (
  <ButtonBase
    className={`bg-primary text-text-inverse hover:bg-primary-alt focus:bg-primary-alt disabled:bg-bg-alt disabled:border-border-alt disabled:text-text-alt ${
      !!className ? className : ''
    }`}
    {...rest}
    ref={forwardedRef}
  />
));

export default ButtonPrimary;