styling.tsx

interface ButtonProps {
  children: React.ReactNode;
  disabled: boolean;
  loading: boolean;
  onClick: () => void;
  variant?: keyof variants;
}

const variants = {
  primary: {
    backgroundColor: "blue",
    color: "white",
    ":not(&.loading):disabled": {
      backgroundColor: "light-blue",
    },
  },
  secondary: {
    backgroundColor: "red",
    color: "yellow",
  },
};

function Button({ children, variant = "primary", ...props }: ButtonProps) {
  const styles = {
    // Defaults go first
    backgroundColor: "black",
    color: "white",
    ":not(&.loading):disabled": {
      backgroundColor: "gray",
    },

    // Then spread in the variant overrides
    ...variants[variant],
  };

  return (
    <button css={styles} className={cx({ loading })} {...props}>
      {children}
    </button>
  );
}