Badge
Note
A component used to communicate status, count, or category with compact visual emphasis.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| N/A | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| ✔️ | Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
| Accessibility: Keyboard interactions | Includes descriptions of all keyboard interactions, focus indication and navigation order. | |
| Accessibility: Text contrast | Text meets a contrast ratio of at least 4.5:1 for small text and 3:1 for large text (WCAG 2.0 1.4.3) and/or a lightness contrast value of at least Lc 75 for standard text and Lc 60 for large text (APCA). | |
| Accessibility: UI component contrast | Visual information required to identify states and boundaries of active UI components has a contrast ratio against adjacent colors of at least 3:1 (WCAG 2.1 1.4.11) and/or a lightness contrast value of at least Lc 60 (APCA). | |
| Usage guidelines | Includes a list of recommended and discouraged usages. | |
| Content guidelines | Includes content standards and guidelines for how to write or format in-product content for the component. | |
| Internationalization | Includes support for various locales and bi-directionality (RTL). | |
| Design tokens | All design attributes (color, typography, layout, animation, etc.) are available as design tokens. |
Anatomy
- Container: The outermost encompassing element.
- Label: The text that describes the badge’s status, count, or category.
- Icon: An optional visual element that represents the badge’s status, count, or category.
- Dot: An optional visual element that can indicate a live status or activity. It is the [[Dot]] component.
States
This component does not have states.
Options
Kind
- Solid: High visual emphasis with a solid background color.
- Outlined: Medium visual emphasis with a border and a light color fill.
- Glass: Medium-low emphasis with a translucent, frosted appearance.
Color
- Standard semantic colors (e.g., inactive, affirmative, cautionary, adverse, informative) and expanded colors from the design system palette are available to represent various statuses or categories.
Size
- Badge sizes vary in height, padding, and icon/dot size to ensure visual harmony across small, medium, and large badges.
Icon
- An icon can be optionally added next to the badge label to provide additional visual context.
Dot
- A Dot component can be added next to the badge label to indicate a live status or activity.
Behaviors
Minimum width
- A badge’s minimum width is set equal to its height, ensuring a circular shape when the content is minimal (e.g., single-digit numbers).
Text overflow
- When the badge label exceeds the available horizontal space, it is truncated with an ellipsis to maintain visual integrity.
