Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Button component variants with TypeScript
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>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment