Badge

Badges are simple tile-like elements that contain short descriptive text.

Design guidance

When and how to use this

Badges can be used to indicate the status of an element whether in the context of a Card or a Table row. Choose the color variant that best matches the underlying message you're trying to convey. For example, a Badge with the text "FAILED" intended to indicate that a measurement job has failed should use the Danger variant in Figma, colorScheme="danger" in React, or the .bg-danger class when using Bootstrap.

When to consider something else

Badges are not interactive, and so should not be used in cases where you want to allow the user to add or remove them, or otherwise interact with them. You might consider the Tag component for such cases.

Figma

Drag in a Badge from the Data Display v2 library in the Assets pane in your Figma file. We provide 5 semantic color variants to match what's available in code. The brand variant of Badge is not available via component library in Figma; this should only be used on our marketing site.

React

By default, Badge will use neutral as its colorScheme and solid as its variant.

Bootstrap

Use the .badge class and one of the bg-* color scheme classes on a <span> element to make a Badge. For warning use cases, add .text-dark to ensure your Badge meets WCAG 2.1 AA color contrast.

Note

Bootstrap has 3 color scheme variants that do not map directly to semantic colors in our system. We map info, light, and dark as shown in the table below. However, we do not recommend using these color variants.