Variants
Default size
For badges with a default size, a label can be accompanied by an icon and/or a counter. Depending on the level of information you want to provide the user, you can choose between these 3 variations:
|
With icon |
Whitout icon |
With counter |
|
|
|
The badges use color variables. This means that they have a light mode and a dark mode to ensure good legibility whatever the mode of your desktop/system.
Compact size
Compact badges have no variations, unlike those with a default size.
But compact badges also use colour variables. This means that they have a light mode and a dark mode to ensure good legibility whatever the mode of your desktop/system.
Status
The neutral and inactive badges are available in compact and default size.
Neutral badges
Neutral badges have been created to avoid visual overload and connotations associated with color. It is therefore the default badge color.
Inactive badges
Inactive badges can be used to display an inactive status. This status highlights the fact that the badge is not being used for any action.
