Badge
A compact label for status, counts, and categories.
Basic
A bare .badge is the neutral filled chip. Add an intent modifier like .badge--primary, .badge--success, .badge--warning, .badge--danger, or .badge--info to color it. Sizing is intrinsic to the content, so a badge is as wide as its label.
Soft
Add .badge--soft for a tinted fill with solid tone text, a quieter look than the filled chip. It composes with an intent modifier and reads its tone. On its own, .badge--soft falls back to the muted foreground.
With icon
There's no icon wrapper class. Any direct <svg> or <i> child scales to the badge's font size, the same convention as .button. Drop it before or after the label.
Loading
Slot a .spinner.spinner--sm in to signal in-flight work. It inherits the badge's text color and shrinks to the badge's font size.
Count
A badge sits inside other components through the font-size cascade. Inside a .button it inherits the button's text size and packs alongside the label.
Flattened
Pill is the default shape. Set --badge-radius to flatten the corners, on a single badge or on a parent scope to flatten every badge inside it at once.
Customization
These variables retune .badge without touching component CSS. Override on the badge itself, on a parent scope, or on :root. The cascade scopes the change.
| Variable | Use |
|---|---|
--badge-radius | Corner radius; defaults to a full pill |
--badge-min-height | Minimum height of the chip |
--badge-padding-block | Top and bottom padding |
--badge-padding-inline | Left and right padding |
--badge-font-size | Label text size; icons track it via 1em |
--badge-font-weight | Label weight |
--badge-bg | Background; intents set the tone, --soft sets a 15% tint |
--badge-color | Text and icon color |
--badge-tone | The intent fill an intent modifier publishes; --soft reads it for its 15% tint |
--badge-tone-emphasis | The accessible text --soft wears on that tint; intents set it from --color-<intent>-emphasis |