We will be updating this content to our new principle-based format in the near future.
Badges are one of the foundational elements of any application.
A visual indicator useful for status information or meta data associated with an element.
The Badge component is an indicator component that displays information to the user. It comes in two varieties - the default, rectangular Badge, and the Pill variation.
Label. Labels describe the Badge to the user. If text is not used, an icon should be used in its place.
Container. The container element wraps the component.
3Sizing & Spacing
The Badge component is available in four sizes - small, regular, large and xLarge.
The Badge component has five available states to use - Neutral, Primary, Success, Warning, and Danger. The badge component does not have any interaction, so there are no 'hover/active' states available.
5Hierarchy & Placement
Try to avoid mixing states and sizes, as this can become confusing for the user.
The Pill Badge is a variation of the Badge component.
The Pill Badge is used predominantly to act as a counter, displaying integer numbers (e.g. as a notification badge).
The Pill Badge component is also available in 5 states -