Data Display
Badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user's attention.
Badges should always have a label for clear comprehension. In rare cases where context is sufficient and the UX Team have reviewed the design, the badge could be undefined. When the label is not defined, a badge becomes icon-only. These badges without a visible label should still include an aria-label in HTML (depending on the context, “aria-label” or “aria-labelledby”).
Badges come in three different sizes: small, medium, and large. The small size is the default and most frequently used option. Use the other sizes sparingly to create a hierarchy of importance on a page.
Badges are sized in `em` units, so that they grow according to the size of the text they are on. Badge size can be controlled by setting the size directly on the badge.
When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:
Badges can be used for color-coded categories and can use any brand or complementary colors, or any colors from a dedicated data-visualization set. `Invert` badges invert the text and background colors depending on the users' color-scheme.
A count variant changes the style slightly by rounding the border radius and using a mono font more suitable for numbers.
Badges can be fixed to any edge of a container using utility classes. They can also be positioned over the corners of parent elements.
A badge in a disabled state shows that it exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a badge may become available later. Badges should only be able to be disabled if they are interactive.
When a badge's label is too long for the available horizontal space, the badge should truncate and include a tooltip to expose the full text upon hover.
<span class="badge">1</span>Another example:
<ul class="stack-nav" role="list">
<li>
<a class="repel bt-thin bb-thin" href="#">
<span class="cluster">
<span class="stack-nav__icon animated-icon play" data-animated-icon="chart"></span>
<span class="stack-nav__title">Reports</span>
</span>
<span class="cluster">
<span class="badge badge-solid-negative">17</span>
</span>
</a>
</li>
</ul>For an inline superscript position, apply badge to a <sup> element (because superscript, the badge will be smaller).
Example superscript badge 2
For an inline subscript position, apply badge to a <sub> element (because subscript, the badge will be smaller).
Example subscript badge 3
Inline <span class="badge">1</span>
Superscript <sup class="badge">2</sup>
Subscript <sub class="badge">3</sub>Badge colors:
1 2 345 678 99+
<span class="badge badge-notice">1</span>
<span class="badge badge-negative">2</span>
<span class="badge badge-positive">345</span>
<span class="badge badge-informative">678</span>
<span class="badge badge-primary">99+</span>
<!-- <span class="badge badge-secondary">10</span>
<span class="badge badge-tertiary">11</span> -->Badge colors solid:
1 2 345 678 99+
<span class="badge badge-solid-notice">1</span>
<span class="badge badge-solid-negative">2</span>
<span class="badge badge-solid-positive">345</span>
<span class="badge badge-solid-informative">678</span>
<span class="badge badge-solid-primary">99+</span>
<!-- <span class="badge badge-secondary">10</span>
<span class="badge badge-tertiary">11</span> -->Badges are sized in em units, so that they grow according to the size of the text they are on. Besides applying badge to superscript and subscript, badge size can be controlled in other ways.
This text is bigger, and so is its badge 1
<p style="font-size: 36px">This text is bigger, and so is its badge <sup class="badge">1</sup></p>If you want a badge to be smaller than ABC, like this: ABC – that can be done with text-sm.
<span class="badge">ABC</span>
<span class="badge t-sm">ABC</span>Give the containing element the relative class, so that the following absolute positioned badges will be in the correct places.
<button>
<!-- text or icon -->
<span class="badge badge-top-right badge-warning t-sm">99+</span>
</button>Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
Works properly across all color schemes (light, dark).
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.