Passing color prop isn't working with custom button

import React from "react";
type ButtonProps = {
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
  color?: string;
};

const Button: React.FC<ButtonProps> = function ({
  disabled = false,
  onClick = (e) => {
    alert(
      `Button with text "${e.currentTarget.innerText}" was clicked but does not have an onClick method!`
    );
  },
  children,
  color = "zinc",
}: ButtonProps) {
  const buttonClass = `flex rounded-md bg-${color}-900 p-1 text-${color}-300 transition duration-300 ease-in-out hover:bg-${color}-800 hover:text-${color}-200
    ${disabled ? "cursor-not-allowed opacity-50" : ""}`;
  return (
    <button
      className={buttonClass}
      onClick={
        !disabled
          ? onClick
          : () => {
              "do nothing";
            }
      }
    >
      {children ?? "No content"}
      <br />
      {buttonClass}
    </button>
  );
};

export default Button;

import React from "react";
type ButtonProps = {
  disabled?: boolean;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
  children?: React.ReactNode;
  color?: string;
};

const Button: React.FC<ButtonProps> = function ({
  disabled = false,
  onClick = (e) => {
    alert(
      `Button with text "${e.currentTarget.innerText}" was clicked but does not have an onClick method!`
    );
  },
  children,
  color = "zinc",
}: ButtonProps) {
  const buttonClass = `flex rounded-md bg-${color}-900 p-1 text-${color}-300 transition duration-300 ease-in-out hover:bg-${color}-800 hover:text-${color}-200
    ${disabled ? "cursor-not-allowed opacity-50" : ""}`;
  return (
    <button
      className={buttonClass}
      onClick={
        !disabled
          ? onClick
          : () => {
              "do nothing";
            }
      }
    >
      {children ?? "No content"}
      <br />
      {buttonClass}
    </button>
  );
};

export default Button;