Component variant make easy with tailwindcss and typescript

import { ReactNode } from "react";
import classnames from "classnames";

const SIZE_VARIANTS = {
  sm: "text-sm py-2 px-4",
  md: "text-base py-3 px-6",
  lg: "text-lg py-4 px-8",
};

const COLOR_VARIANTS = {
  primary: "bg-blue-500 hover:bg-blue-600 text-white",
  dark: "bg-gray-800 hover:bg-gray-900 text-white",
  light: "bg-gray-200 hover:bg-gray-300 text-gray-800",
  success: "bg-green-500 hover:bg-green-600 text-white",
};

type ButtonProps = {
  children?: ReactNode;
  // magic happend here
  size?: keyof typeof SIZE_VARIANTS;
  color?: keyof typeof COLOR_VARIANTS;
};

export default function Button({
  children,
  size = "md",
  color = "primary",
}: ButtonProps) {
  return (
    <button className={classnames(COLOR_VARIANTS[color], SIZE_VARIANTS[size])}>
      {children}
    </button>
  );
}