Tag

カテゴリ分類を視覚的に区別するためのタグコンポーネント。色に意味はなく、分類の識別に使用する。

いつ使うか

レコードやアイテムのカテゴリ・分類を視覚的に区別するときに使用する（「staff」「manager」等）
テーブルの行やカード内で、項目のカテゴリをインラインで表示するときに使用する
同じ画面に複数のカテゴリが並ぶとき、色で視覚的に区別できるようにする

いつ使わないか

状態の意味（成功・警告・エラー等）を伝えるには StatusBadge を使用する
ユーザーがクリックして操作するものには使わない。ボタンやリンクを使用する
数値カウント（通知バッジ等）の表示には使わない

Usage

import { Tag } from '@bi-shop-it/ui/tag';

<Tag label="staff" />
<Tag color="purple" label="manager" />
<Tag color="teal" label="admin" variant="subtle" />

Props

Prop	型	デフォルト	説明
`label`	`string`	—	タグに表示するテキスト
`color`	`'amber' \| 'blue' \| 'lime' \| 'neutral' \| 'pink' \| 'purple' \| 'teal'`	`'blue'`	タグの色。意味ではなく視覚的な区別のために使う
`icon`	`IconName`	—	ラベルの前に表示するアイコン名
`variant`	`'solid' \| 'subtle' \| 'ghost'`	`'solid'`	視覚的な重み。solid が最も強く、ghost が最も控えめ

variant の使い分け

variant で視覚的な重みを3段階に制御する。同じ画面内でカテゴリの重要度に差をつけたいときに使い分ける。

variant	見た目	視覚的重み
`solid`	背景色 + ボーダー + テキスト	高
`subtle`	背景色 + テキスト	中
`ghost`	テキスト色のみ	低

solidsubtleghost

<Tag color="blue" label="solid" variant="solid" />
<Tag color="blue" label="subtle" variant="subtle" />
<Tag color="blue" label="ghost" variant="ghost" />

使用例: シフト管理での視覚的階層

勤務タイプなど、同一カテゴリ内で重要度に差がある場合に variant を使い分ける。

勤務有給公休

<Tag color="blue" label="勤務" variant="solid" />
<Tag color="amber" label="有給" variant="subtle" />
<Tag color="neutral" label="公休" variant="ghost" />

color の使い分け

7色のカラーが用意されている。色自体に意味はなく、カテゴリ同士を視覚的に区別するために使い分ける。neutral は低優先度のラベルに適している。

amberlimetealbluepurplepinkneutral

<Tag color="amber" label="amber" />
<Tag color="lime" label="lime" />
<Tag color="teal" label="teal" />
<Tag color="blue" label="blue" />
<Tag color="purple" label="purple" />
<Tag color="pink" label="pink" />
<Tag color="neutral" label="neutral" />

状態

デフォルト

staff

<Tag label="staff" />

With Icon

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

staffmanageradminguest

<Tag color="blue" icon="User" label="staff" />
<Tag color="purple" icon="Star" label="manager" />
<Tag color="teal" icon="Settings" label="admin" />
<Tag color="amber" icon="LogIn" label="guest" />

ドメインカテゴリのマッピング例

Tag の color はドメインに依存しない。アプリケーション側でドメインカテゴリを color にマッピングして使用する。