Badge

件数などの数値を視覚的に表すためのコンポーネントです。Iconなどの視覚情報が少ない要素に変化が発生していることを通知バッジとして知らせるときにも使います。

種類

件数を表すものと、単に視覚情報をドットで表すものの2種類があります。

アイコンなどの右肩にも表示できます。

色

特に意味は持たせずに4種類の色を用意しています。

アクセシビリティ

開発時の考慮点

ドット表示の場合は状態が伝わるテキストを提供する

ドット表示のBadgeは視覚情報のみで状態の変化を示すため、スクリーンリーダーを使用するユーザーには何を表しているのか伝わりません。 そのため、ドット表示を使用する場合は、状態や目的が伝わる補助テキストを提供してください。

VisuallyHiddenTextコンポーネントを使用すると、視覚的には表示せずにスクリーンリーダー向けのテキストを提供できます。

良い実装例

悪い実装例

Props