StatusBadge

ドット付きのステータスバッジ。色は名前で決まる。

行やレコードの状態を、色付きのドットとラベルで示します。状態の文字列から色への対応は組み込みの表で決まり、colorMap で足したり上書きしたりできます。

export const client = "only";

import { StatusBadge } from "@squadbase/vantage/components";

export default function Example() {
  return (
    <div className="flex flex-col items-start gap-3">
      <div className="flex flex-wrap gap-2">
        <StatusBadge status="active" label="有効" />
        <StatusBadge status="pending" label="保留" />
        <StatusBadge status="warning" label="要確認" />
        <StatusBadge status="error" label="エラー" />
        <StatusBadge status="inactive" label="停止" />
      </div>
      <StatusBadge
        status="reviewing"
        label="レビュー中"
        colorMap={{ reviewing: "blue" }}
      />
    </div>
  );
}

import { StatusBadge } from "@squadbase/vantage/components";

PropType

status?string

状態の文字列。色はこれで決まる。

Typestring

label?string

表示するテキスト。省くと `status` がそのまま出る。

Typestring

colorMap?Record<string, string>

状態 → 色名の対応。既定の表に上書きされる。

TypeRecord<string, string>

className?string

足すクラス。

Typestring

既定の対応

`status`	色
`active`	green
`inactive`	gray
`warning`	yellow
`error`	red
`pending`	blue

未知の状態は gray になります。独自の状態を足すときは colorMap に green / gray / yellow / red / blue のいずれかを割り当ててください。

<StatusBadge status="reviewing" label="レビュー中" colorMap={{ reviewing: "blue" }} />

テーブルのセルにそのまま置けます。

{
  accessorKey: "status",
  header: "状態",
  cell: ({ row }) => <StatusBadge status={row.original.status} />,
}