本文へ移動

§07-02Notifications

バッジカウンタ

アイコンに未読や未処理の件数を小さく示す。

開かなくても対応待ちがあることを知らせる。通知や受信箱、カートのように件数が行動のきっかけになる場所で使う。

実装のポイント

上限を決めて「99+」に丸め、0 件ではバッジ自体を消す。件数はアイコンボタンの aria-label に含め、「通知 3 件」のように読ませる。

特徴
  • アクセシビリティ
デモで使っているもの
  • shadcn/ui
  • lucide-react

このパターンが効く目的