Badge

Badgeコンポーネントは、件数などの数値を視覚的に表すためのコンポーネントです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

種類

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

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

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

アクセシビリティ

ドット表示の場合には視覚情報しか持たないため、何らかの形で必ずアクセシブルな名前を与えてください。

Props

count
number

件数

overflowCount
number

最大表示件数。この数を超えた場合は{最大表示件数+}と表示される

showZero
falsetrue

0値を表示するかどうか

type
"grey""blue""red""yellow"

色の種類

dot
falsetrue

ドット表示するかどうか