Skip to content

Instantly share code, notes, and snippets.

Created February 20, 2022 01:50
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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> = ({
size = "small",
variant = "primary",
}) => (
className={clsx(buttonSizeClasses[size], buttonVariantClasses[variant])}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment