Badge
ステータス・カテゴリ・ラベルを小さなピルで表示するコンポーネント。「未読」「公開中」「要対応」など、状態を一目で伝えるときに使う。
インストール
npx shoji add badge
プレビュー
Variants
デフォルト
セカンダリ
アウトライン
削除
完了
注意
パターン
Dot
テキストなしの小さな状態ドット。オンライン・未読あり・処理中などの状態を点だけで伝える。アバター右下などに重ねて使う。
badgestatusminimal
田
オンライン
Count
通知数・未読数などの数値バッジ。99件を超える場合は「99+」で表示。ナビアイテム・アイコンボタンの右上に重ねて使う。
badgenotificationcount
3
99+
Status with Dot
「公開中 ●」のようにドット + テキストで状態を伝えるパターン。SaaS の一覧画面・カード内のステータス表示で頻出。
badgestatusSaaS
公開中
下書き
アーカイブ
要対応
使い方
こんなときに使う
- コンテンツのカテゴリ・タグを表示するとき
- 「公開」「下書き」「アーカイブ」などのステータスを示すとき
- 通知数・件数など数値を小さく表示するとき（通知バッジ）
使わないほうがいい場面
- 長い文章を Badge に入れる（1〜4文字程度が適切）
- 装飾目的だけで使う（必ず意味のある情報を伝える）
JP 最適化のポイント
- success / warning variant を追加 — 英語UIより日本語UIでは「完了」「注意」の色分けが多用される
- 日本語の短いラベルは英語より縦に高くなりがち — py-0.5 の余白で日本語テキストを適切に囲む