StatusBadge

ステータス表示用のバッジコンポーネント。variantで状態の意味を視覚的に伝える。

いつ使うか

レコードやアイテムの現在の状態を表示するときに使用する（「承認済み」「レビュー中」「却下」等）
テーブルの行やカード内で、項目の状態をインラインで伝えるときに使用する
variant でステータスの意味合い（成功・警告・エラー・情報）を色で区別する

いつ使わないか

ユーザーがクリックして操作するものには使わない。ボタンやリンクを使用する
数値カウント（通知バッジ等）の表示には使わない。専用のカウンターコンポーネントを使用する

Usage

import { StatusBadge } from '@bi-shop-it/ui/status-badge';

<StatusBadge label="下書き" />
<StatusBadge label="承認済み" variant="success" />
<StatusBadge label="却下" variant="destructive" />

Props

Prop	型	デフォルト	説明
`label`	`string`	—	バッジに表示するテキスト
`variant`	`'default' \| 'success' \| 'warning' \| 'destructive' \| 'info'`	`'default'`	ステータスの視覚的な意味合い
`icon`	`IconName`	—	ラベルの前に表示するアイコン名

variant の使い分け

variant	意味合い	ドメインステータスの例
`default`	特定の意味を持たない中立的な状態	下書き、未分類、保留
`success`	正常完了・承認された状態	承認済み、完了、公開中、有効
`warning`	注意が必要な状態	レビュー中、期限間近、要対応
`destructive`	エラー・却下された状態	却下、失敗、期限切れ、無効
`info`	情報提供・進行中の状態	確認中、処理中、新着

状態

デフォルト

下書き

<StatusBadge label="下書き" />

Variants

下書き承認済みレビュー中却下確認待ち

<StatusBadge label="下書き" />
<StatusBadge label="承認済み" variant="success" />
<StatusBadge label="レビュー中" variant="warning" />
<StatusBadge label="却下" variant="destructive" />
<StatusBadge label="確認待ち" variant="info" />

With Icon

icon にアイコン名を文字列で指定する。アイコンは装飾的要素として扱われ、aria-hidden="true" が自動付与される。

承認済み要対応却下確認中

<StatusBadge icon="CircleCheck" label="承認済み" variant="success" />
<StatusBadge icon="CircleAlert" label="要対応" variant="warning" />
<StatusBadge icon="CircleX" label="却下" variant="destructive" />
<StatusBadge icon="Info" label="確認中" variant="info" />

ドメインステータスのマッピング例

StatusBadge の variant はドメインに依存しない視覚的な意味合いを表す。アプリケーション側でドメインステータスを variant にマッピングして使用する。

import type { StatusBadgeVariant } from '@bi-shop-it/ui/status-badge';

// ドメインステータスと variant のマッピング
const orderStatusMap: Record<
  string,
  { label: string; variant: StatusBadgeVariant }
> = {
  draft: { label: '下書き', variant: 'default' },
  pending: { label: '承認待ち', variant: 'info' },
  approved: { label: '承認済み', variant: 'success' },
  rejected: { label: '却下', variant: 'destructive' },
};

// 使用例
const status = orderStatusMap[order.status];
<StatusBadge label={status.label} variant={status.variant} />;

アクセシビリティ

コンポーネントが内部で処理すること

装飾アイコンに aria-hidden="true" を自動付与し、スクリーンリーダーから隠す
label テキストがスクリーンリーダーで読み上げられるため、色だけに依存しない情報伝達を保証する

利用者が対応すること

label はステータスの意味が伝わるテキストにすること（「承認済み」「却下」等。色名は避ける）
動的にステータスが変化する場合は、aria-live リージョン内に配置して変化をスクリーンリーダーに通知すること