Badge

Description

.bp-badge is an inline label element. It supports six semantic color variants (primary, success, warning, error, info, neutral) each available in three styles (solid default, subtle, outline). A __dot sub-element adds a status indicator. No JavaScript required.

Usage

Solid variants (default)

Primary Success Warning Error Info Neutral

<span class="bp-badge bp-badge--primary">Primary</span>
<span class="bp-badge bp-badge--success">Success</span>
<span class="bp-badge bp-badge--warning">Warning</span>
<span class="bp-badge bp-badge--error">Error</span>
<span class="bp-badge bp-badge--info">Info</span>
<span class="bp-badge bp-badge--neutral">Neutral</span>

Subtle variants

Primary Success Warning Error Info Neutral

<span class="bp-badge bp-badge--primary bp-badge--subtle">Primary</span>
<span class="bp-badge bp-badge--success bp-badge--subtle">Success</span>
<span class="bp-badge bp-badge--warning bp-badge--subtle">Warning</span>
<span class="bp-badge bp-badge--error bp-badge--subtle">Error</span>
<span class="bp-badge bp-badge--info bp-badge--subtle">Info</span>
<span class="bp-badge bp-badge--neutral bp-badge--subtle">Neutral</span>

Outline variants

Primary Success Warning Error Info Neutral

<span class="bp-badge bp-badge--primary bp-badge--outline">Primary</span>
<span class="bp-badge bp-badge--success bp-badge--outline">Success</span>
<span class="bp-badge bp-badge--warning bp-badge--outline">Warning</span>
<span class="bp-badge bp-badge--error bp-badge--outline">Error</span>
<span class="bp-badge bp-badge--info bp-badge--outline">Info</span>
<span class="bp-badge bp-badge--neutral bp-badge--outline">Neutral</span>

With dot indicator

Active Pending Failed Inactive

<span class="bp-badge bp-badge--success">
<span class="bp-badge__dot" aria-hidden="true"></span>Active
</span>
<span class="bp-badge bp-badge--warning bp-badge--subtle">
<span class="bp-badge__dot" aria-hidden="true"></span>Pending
</span>
<span class="bp-badge bp-badge--error bp-badge--outline">
<span class="bp-badge__dot" aria-hidden="true"></span>Failed
</span>
<span class="bp-badge bp-badge--neutral">
<span class="bp-badge__dot" aria-hidden="true"></span>Inactive
</span>

Sizes

Default Large

<span class="bp-badge bp-badge--success">Default</span>
<span class="bp-badge bp-badge--success bp-badge--lg">Large</span>

Attached to other components

Badges attach to other components via the parent’s position: relative — the badge itself stays layout-agnostic.

Nav item with notification count

<style>
.demo-nav--with-badge { position: relative; }
.demo-nav--with-badge li { position: relative; }
.demo-nav__badge { position: absolute; top: -0.4rem; right: -0.6rem; }
</style>
<ul class="bp-nav demo-nav--with-badge" role="list">
<li>
  <a class="bp-nav__link" href="#">
    Inbox
    <span class="bp-badge bp-badge--error demo-nav__badge"
          aria-label="3 unread messages">3</span>
  </a>
</li>
<li><a class="bp-nav__link" href="#">Settings</a></li>
</ul>

Card with status badge

Production deployment completed successfully.

<style>
.demo-card--badge { max-width: 22rem; }
.demo-card--badge .bp-card__header { flex-direction: row; align-items: center; justify-content: space-between; }
</style>
<div class="bp-card demo-card--badge">
<div class="bp-card__header">
  <h3 class="bp-card__title">Deploy #42</h3>
  <span class="bp-badge bp-badge--success bp-badge--subtle">
    <span class="bp-badge__dot" aria-hidden="true"></span>Live
  </span>
</div>
<div class="bp-card__body">Production deployment completed successfully.</div>
</div>

Recommended badges

Use case	Variant	Style
Live / Active / Online	`--success`	solid or subtle
Pending / In review	`--warning`	subtle
Failed / Error / Blocked	`--error`	solid or outline
New / Informational	`--info`	subtle
Draft / Inactive / Archived	`--neutral`	solid
Feature / Brand highlight	`--primary`	solid or subtle
Notification count	`--error`	solid
Category / Tag label	`--neutral` or `--primary`	outline

Public API

Variable	Default	Description
`--badge-bg`	`var(--bp-primary-subtle)`	Background color (overridden by semantic variant classes)
`--badge-color`	`var(--bp-primary-fg)`	Text color (overridden by semantic variant classes)
`--badge-border`	`1px solid transparent`	Border
`--badge-radius`	`var(--bp-radius-full)`	Border radius

Variants

Class	Description
`bp-badge--primary`	Brand/primary color
`bp-badge--success`	Green — active, live, done
`bp-badge--warning`	Orange — pending, at risk
`bp-badge--error`	Red — failed, blocked, count
`bp-badge--info`	Blue — informational, neutral notices
`bp-badge--neutral`	Subtle gray — inactive, draft
`bp-badge--subtle`	Low-opacity tint style (combine with semantic)
`bp-badge--outline`	Transparent bg, colored border (combine with semantic)
`bp-badge--lg`	Larger size for standalone use

Customization example

Custom pill tag via public API

v2.0.0 archived

<style>
.demo-badge--version { --badge-bg: var(--bp-primary); --badge-color: var(--bp-primary-fg); --badge-radius: var(--bp-radius-md); }
.demo-badge--archived { --badge-radius: var(--bp-radius-sm); }
</style>
<span class="bp-badge demo-badge--version">v2.0.0</span>
<span class="bp-badge bp-badge--neutral demo-badge--archived">archived</span>

Accessibility

Badges are decorative labels — they do not need role="status" unless their content updates dynamically.
When a badge conveys information not present in surrounding text (e.g. a count on a nav item), add aria-label to the badge: aria-label="3 unread messages".
The __dot element must always have aria-hidden="true" — its color meaning is already conveyed by the badge text.
Do not rely on color alone to convey meaning — pair color with text (e.g. “Active”, “Error”) or an icon with a text alternative.
Sufficient contrast: --success and --warning solid variants use color-mix-derived dark text for WCAG AA compliance. --error and --info solid variants use #fff — verify contrast if you change those token values. If you override --badge-bg, always verify contrast meets WCAG AA (4.5:1 for small text).

Browser APIs

API	Availability	Used for	Without it	Polyfill
`color-mix()`	Widely available Baseline 2023	Subtle variant tinted backgrounds; solid success/warning text color derivation	Solid token color used instead	None needed; `@supports` guard not required — fallback to solid is acceptable

Internals

--_bg, --_color, --_border, --_radius — component-private, do not set directly.