Button.js

[DmitriiMelnikOnix]

let classNames = 'Button';
  switch (variant) {
    case buttonVariants.primary:
      classNames += ' buttonPrimary';
      break;
    case buttonVariants.secondary:
      classNames += ' buttonSecondary';
      break;
    case buttonVariants.small:
      classNames += ' buttonSmall';
      break;
    case buttonVariants.cart:
      classNames += ' buttonCart';
      break;
    default:
      classNames += ' ';
  }

  let disabledStyle = 'disabled';
  switch (variant) {
    case buttonVariants.primary:
      disabledStyle += ' disabledPrimary';
      break;
    case buttonVariants.secondary:
      disabledStyle += ' disabledSecondary';
      break;
    case buttonVariants.small:
      disabledStyle += ' disabledSmall';
      break;
    default:
      disabledStyle += ' ';
  }

Багато коду і важко читається. Можна написати простіше) Один з вариантів. Переписати з використанням обʼєкту замість switch. Але можна написати максимально просто.

//scss
.button {
  background-color: #AC1313;
  cursor: pointer;

  &.primary {
     // styles for primary
     &.disabled {
        // styles for primary disable
     }
  }

  &.secondary {
     // styles for secondary
     &.disabled {
        // styles for secondary disable
     }
  }
}

//js
export const Button = ({
  text, variant, disabled, onClick,
}) => {
  return (
    <button type="button" disabled={disabled} className={`button ${variant} ${disabled ? 'disabled': ''}`} onClick={onClick}>
      <span>{text}</span>
    </button>
  );
};

[dimakrugly]

Виправлено