Button component variants with TypeScript

Button.tsx

import { FC } from "react";
import clsx from "clsx";

type ButtonSize = "small" | "medium";
type ButtonVariant = "primary" | "secondary";

interface ButtonProps {
  size?: ButtonSize;
  variant?: ButtonVariant;
}

const buttonSizeClasses: Record<ButtonSize, string> = {
  small: "py-1 px-2",
  medium: "py-2 px-4",
};

const buttonVariantClasses: Record<ButtonVariant, string> = {
  primary: "bg-blue-700 text-white",
  secondary: "border border-gray-300 text-black",
};

const Button: FC<ButtonProps> = ({
  children,
  size = "small",
  variant = "primary",
}) => (
  <button
    className={clsx(buttonSizeClasses[size], buttonVariantClasses[variant])}
  >
    {children}
  </button>
);