Badge

小さなラベル。件数・状態・タグに。

テキストの横に添える小さなラベルです。行の状態を色付きのドットで示したいときは StatusBadge を使ってください。

export const client = "only";

import { Badge } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>default</Badge>
      <Badge variant="secondary">secondary</Badge>
      <Badge variant="destructive">destructive</Badge>
      <Badge variant="outline">outline</Badge>
      <Badge variant="ghost">ghost</Badge>
      <Badge variant="link">link</Badge>
    </div>
  );
}

import { Badge, badgeVariants } from "@squadbase/vantage/ui";

Variant

default / secondary / destructive / outline / ghost / link。

badgeVariants はクラス文字列を返す関数で、<a> など別の要素にバッジの見た目を移したいときに使います。

<a href="/docs" className={badgeVariants({ variant: "outline" })}>
  ドキュメント
</a>