UI Component Lab English

← コンポーネント一覧

データ表示

Badge バッジ

通知ボタンの未読件数のように、別の要素に重ねて付ける小さな印。

見分けるポイント

アイコンやボタンの右上に重なる小さな丸や角丸の印で、多くは赤い。数字が入るか、点だけのこともある。

バリエーション

ドット
数字のない小さな点で、新しいものがあることだけを示すもの。

挙動

  • 件数が変わると更新され、0になると消える。このデモでは通知を開くと消える。
  • 大きな数は「99+」のように省略する。
  • バッジ自体はスクリーンリーダーから隠し、件数は「通知 未読3件」のように持ち主のボタンの名前に含める。

キーボード操作

キー動作
—バッジ自体にはない。付いているボタンは Enter / Space で押せる。
  • タグ: バッジは別の要素に付けて件数や状態を示し、タグは単独で内容のラベルとして置く。

出典