StatusBadge

A dot-and-label status badge, coloured by name.

Shows a row’s or record’s state as a coloured dot with a label. A built-in map turns the status string into a colour, and colorMap extends or overrides it.

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

The status string; it picks the colour.

Typestring

label?string

The text to show; defaults to `status`.

Typestring

colorMap?Record<string, string>

Status → colour name, merged over the built-in map.

TypeRecord<string, string>

className?string

Classes to add.

Typestring

The built-in map

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

Anything unknown falls back to gray. To add your own states, map them to one of green / gray / yellow / red / blue.

<StatusBadge status="reviewing" label="Reviewing" colorMap={{ reviewing: "blue" }} />

It drops straight into a table cell.

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