Badge
A small inline label for a status or a count, tinted by a hue.
Example
View Code
<p>Deploy <span class="badge" data-variant="success">Live</span> to production, or keep it <span class="badge" data-variant="neutral">Draft</span>.</p>
When to use it
A word or a number that labels something else: a status beside a title, a count on a tab, a version next to a heading. It sits in the line of text and takes the hue that means the state.
How it works
An inline box one step smaller than the text around it, with a pill corner by default. data-emphasis="medium", the default, is a subtle tint of the hue with the hue's darker text, quiet enough to repeat down a list. high fills the badge for the one state that must stand out; low is the text alone.
<h3>Release notes <span class="badge" data-emphasis="high">New</span></h3>
Accessibility
Colour is decoration here; the word is the meaning, so "Live" and "Draft" work with no colour at all. A count beside a button or a tab is read as separate text, which is rarely what you want; put it into the control's aria-label instead. Text over every tint meets AA in both schemes.
Attributes
| Attribute | Type | Values | Default | Description |
|---|---|---|---|---|
data-variant |
enum | primary, secondary, success, warning, alert, neutral |
primary |
Which hue tints the badge. |
data-emphasis |
enum | high, medium, low |
medium |
medium is a subtle tint with dark text, high a solid fill, low text alone. |
data-size |
enum | sm, md, lg |
md |
The text size the badge sits beside; the badge renders one step smaller. |
Children
> svg: 0 to 1. An optional icon, sized to the text.
Tokens
| Token | Description |
|---|---|
--yeti-badge-radius |
Corner radius; full makes a pill. |
--yeti-badge-weight |
Text weight. |
--yeti-space-xs |
Gap between the icon and the text. |
--yeti-leading-tight |
Line height. |
--yeti-border-width |
Border width. |
--yeti-color-primary |
The default variant's colour, when data-variant is absent. |
--yeti-color-primary-subtle |
The default variant's tint. |
--yeti-color-primary-soft |
The default variant's soft stop. |
--yeti-color-primary-strong |
The default variant's strong stop. |
--yeti-color-primary-text |
The default variant's text colour. |
--yeti-on-primary |
Text on the default variant's colour. |
--yeti-text-md |
Text size when data-size is absent. |
--yeti-space-sm |
The space step when data-size is absent. |
Internal tokens (may change between minor versions)
- `--_yeti-variant` - `--_yeti-variant-subtle` - `--_yeti-variant-text` - `--_yeti-on-variant` - `--_yeti-size-text` - `--_yeti-variant-soft` - `--_yeti-variant-strong` - `--_yeti-size-space`Accessibility
- A badge is text. If the colour carries meaning, the text must carry it too. A count that belongs to a control goes into that control's accessible name, not beside it.
Browser support
- Used without guards: inline flexbox
- Behind
@supports: nothing
JavaScript
None. This component is CSS only.
Available since 7.0.0.