通知バッジ付きアイコン
通知バッジ付きアイコンは、ベルなどのアイコンの右上に 未読件数の小さな丸バッジ を重ねる定番のUI部品です。このサンプルは position:relative のアイコン枠に対し、バッジ i.nb__b を position:absolute で top:-4px;right:-4px に配置しています。
解説
通知バッジ付きアイコンは、ベルなどのアイコンの右上に未読件数の小さな丸バッジを重ねる定番のUI部品です。このサンプルは position:relative のアイコン枠に対し、バッジ i.nb__b を position:absolute で top:-4px;right:-4px に配置しています。バッジは min-width と border-radius:999px を使い、1桁では円、2桁以上では自然に横長の丸へ伸びる作りです。背景と同色の border（2px）で縁取り、アイコンと重なってもバッジが浮いて見えます。
使う場面
- ヘッダーの通知ベルやメッセージアイコン
- カートの個数表示やお気に入り件数
- 件数を出さず存在だけ示す赤い点（
--dot修飾子）
カスタマイズでは、バッジ色（#ef4444）をブランドや警告度に合わせて変えられます。数字が大きくなりすぎる場合は表示側で「99+」のように丸めるのが一般的です。border の色はアイコンを置く背景色と必ず一致させてください。アクセシビリティ面では、件数を画面読み上げに伝えるため aria-label に「未読3件」のような説明を添えると、視覚に頼らないユーザーにも状況が伝わります。
使用例・適したシーン
- カード装飾
- 見出し下線
- ホバー強調
よくある質問
件数表示と赤い点はどう切り替えますか
件数を出す場合はバッジに数字を入れ、存在だけ示したいときは nb__b--dot 修飾クラスを付けます。dot側はmin-widthや幅を小さくしてpaddingをなくし、数字のない小さな丸にしています。
桁数が増えてもレイアウトは崩れませんか
崩れにくい作りです。バッジはmin-widthで最小サイズを保ちつつ、内容が増えると左右paddingと角丸で横に伸びます。極端に大きい数値は表示側で99+などに丸めると見た目が安定します。