バッジ
Badgeアイコンや要素に重ねて、件数や状態を小さなラベルで知らせる表示UI。
○ 使う場面
- アイコンボタンに未読件数や新着状態を重ねて知らせたいとき
- 詳細を開かなくても状態（新着・要対応など）を一目で伝えたいとき
× 避ける場面
- 件数そのものが主情報で、単独でも意味を持つ数値を見せたいとき（本文中の数値表示で十分）
- ユーザーの操作を伴う選択・フィルタリングの単位であるとき（→チップ）
別名
通知バッジ、通知ドット、レッドドット
近縁種との比較
「バッジ（badge）」はもともと警察や軍隊、ボーイスカウトなどが身につける記章・徽章を指す語で、着用者の所属や階級、達成をひと目で示す小さな印という性質を、通知やアイコンの状態表示にそのまま転用したのがこのUIである。バッジには件数を表示する数値バリアントと、件数を持たず存在の有無だけを示す小さな点だけのバリアント（「通知ドット」または「レッドドット」と呼ばれる）があり、後者は未読の有無のみを伝えたい場合や、件数を出すとかえって煩雑になる場面で使われる。
| 近縁種 | 違い・使い分け |
|---|---|
| タグ／チップ | 同じ小型ラベルでもタグ／チップは削除・選択・トグルなどユーザーが操作できる要素であるのに対し、バッジは状態や件数を一方的に知らせるだけで操作を伴わない。「操作できるのがChip、表示だけならTag/Badge」という基準を採用する。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション