§07-02Notifications
バッジカウンタ
アイコンに未読や未処理の件数を小さく示す。
開かなくても対応待ちがあることを知らせる。通知や受信箱、カートのように件数が行動のきっかけになる場所で使う。
実装のポイント
上限を決めて「99+」に丸め、0 件ではバッジ自体を消す。件数はアイコンボタンの aria-label に含め、「通知 3 件」のように読ませる。
- 特徴
- アクセシビリティ
- デモで使っているもの
- shadcn/ui
- lucide-react
§07-02Notifications
アイコンに未読や未処理の件数を小さく示す。
開かなくても対応待ちがあることを知らせる。通知や受信箱、カートのように件数が行動のきっかけになる場所で使う。
上限を決めて「99+」に丸め、0 件ではバッジ自体を消す。件数はアイコンボタンの aria-label に含め、「通知 3 件」のように読ませる。