Badge

xs

xsサイズのバッジです。最も小さなサイズのバッジです。

sm

smサイズのバッジです。

md

mdサイズのバッジです。数値を含めることができます。

lg

lgサイズのバッジです。最も大きなサイズのバッジです。数値を含めることができます。

normal (Default)

デフォルトのカラースタイルです。重要な情報をユーザーに伝える際に使用します。

emphasis

強調のスタイルです。重要度が高く、画面全体において特に誘目して伝えたい情報に使用します。

False

バッジの周囲に余白がないスタイルです。

バッジを独立して配置する場合に使用します。

True

バッジの周囲に余白があるスタイルです。

バッジをコンテンツの前面に重ねて使用する場合に使用します。

バッジの数値には、ユーザーが最大値を適用することができます。適用した数値を超える場合は「+」によって省略されます。
例えば、最大値を「99」と設定すると100以上の場合は「99+」、最大値を「999」と設定すると1000以上の場合は「999+」と表示されます。

• Vertical Resizing: Hug
• Horizontal Resizing: Hug
• padding Vertical: 4px
• padding Horizontal: 8px

バッジをコンテンツの前面に配置する場合は右上以外の場所に配置しないでください。
右上以外の場所に配置すると情報を適切な順序で認知することが困難になる懸念やバッジを適切に視認することが困難になる懸念があります。

バッジをコンテンツの前面に配置する場合は、バッジの大きさはコンテンツの大きさに応じたサイズを指定してください。
バッジの大きさはコンテンツの大きさの0.5倍以上にはしないように留意します。

同じヒエラルキーのオブジェクトに対して、複数のvariantを使用しないでください。バッジコンポーネントは、色によるステータス表現を担保していません。

極端に大きな数値をトリムせずに表示しないでください。「1024」や「9999」などの数値はユーザーに過度な認知負荷を与える懸念があるため、最大値を適用して適切な値を表示してください。