ホーム/コンポーネント/データ表示/ステータスバッジ StatusBadge

StatusBadge

任意のHEXカラーでステータスを表示するバッジ。背景色は自動で20%透過に変換される。

import { StatusBadge } from "@blueai/ui"

Examples

基本

新規進行中完了キャンセル

<StatusBadge label="新規" color="#3b82f6" />
<StatusBadge label="進行中" color="#f59e0b" />
<StatusBadge label="完了" color="#22c55e" />
<StatusBadge label="キャンセル" color="#ef4444" />

アイコン付き

承認済み要対応

<StatusBadge
  label="承認済み"
  color="#22c55e"
  icon={<svg width="12" height="12" viewBox="0 0 16 16" fill="none">
    <path d="M3 8l4 4 6-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
  </svg>}
/>

カスタムカラー

DraftReviewMerged

<StatusBadge label="Draft" color="#6366f1" />
<StatusBadge label="Review" color="#8b5cf6" />
<StatusBadge label="Merged" color="#0ea5e9" />

Props

Prop	Type	Default	Description
label*	string	—	表示テキスト
color*	string	—	HEXカラーコード（例: #22c55e）
icon	ReactNode	—	ラベル前に表示するアイコン
className	string	—	追加CSSクラス