Tailwind CSS でバリアント対応バッジコンポーネントを作る

概要

cva（class-variance-authority）を使って、バリアントを型安全に管理するコンポーネントを作る。 clsx との組み合わせで追加クラスも柔軟に扱える。

インストール

npm install class-variance-authority clsx

コンポーネント実装

// src/components/ui/Badge.tsx
import { cva, type VariantProps } from "class-variance-authority";
import { clsx } from "clsx";

const badge = cva(
  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
  {
    variants: {
      color: {
        gray: "bg-gray-100 text-gray-700",
        blue: "bg-blue-100 text-blue-700",
        green: "bg-green-100 text-green-700",
        red: "bg-red-100 text-red-700",
        yellow: "bg-yellow-100 text-yellow-700",
      },
      size: {
        sm: "text-xs px-2 py-0.5",
        md: "text-sm px-2.5 py-1",
      },
    },
    defaultVariants: {
      color: "gray",
      size: "sm",
    },
  }
);

type BadgeProps = VariantProps<typeof badge> & {
  children: React.ReactNode;
  className?: string;
};

export function Badge({ color, size, children, className }: BadgeProps) {
  return (
    <span className={clsx(badge({ color, size }), className)}>{children}</span>
  );
}

利用例

<Badge color="blue">Next.js</Badge>
<Badge color="green" size="md">reviewed</Badge>
<Badge color="red">draft</Badge>

ポイント

• cva でバリアントを一元管理し、追加 props を型で表現する
• defaultVariants によってデフォルト値を保証する
• clsx で外部から className を上書き可能にしている