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.
React
| Prop | Description |
|---|---|
colorScheme | Sets the background and text color of the Badge based on semantic meaning |
variant | Sets the overall visual appearance |
colorMode | Show light or dark - for use with variants |
ColorSchemes
Variants
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.
| Class | Background color | Text color |
|---|---|---|
.bg-primary | primary 600 | neutral 0 |
.bg-warning | warning 500 | neutral 700 (via .text-dark) |
.bg-danger | danger 500 | neutral 0 |
.bg-neutral | neutral 600 | neutral 0 |
.bg-success | success 500 | neutral 0 |
.bg-info (not recommended) | brand navy 400 | neutral 0 |
.bg-light (not recommended) | neutral 100 | neutral 700 (via .text-dark) |
.bg-dark (not recommended) | neutral 700 | neutral 0 |