Badge

Short status or category label. Subtle for most UI, Solid for emphasis, Outline on busy backgrounds.

Preview

React · live from the Storybook

HTML and CSS

The same component as plain HTML with pixels-ui.css, no framework needed.

Draft New Active Pending Overdue Beta

HTML

<div class="row">
  <span class="px-badge">Draft</span>
  <span class="px-badge px-badge--brand">New</span>
  <span class="px-badge px-badge--success"><span class="px-badge__dot"></span>Active</span>
  <span class="px-badge px-badge--warning">Pending</span>
  <span class="px-badge px-badge--danger">Overdue</span>
  <span class="px-badge px-badge--info">Beta</span>
</div>

Usage

Keep to 1–2 words.
Color must not be the only cue: pair with text or an icon.

Installation

Included in the core files. No extra install.

HTML

<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>

Examples

Styles

Subtle (default), Solid and Outline.

SubtleSubtleSubtle

SolidSolidSolidSolidSolid

OutlineOutlineOutline

HTML

<div class="stack">
  <div class="row"><span class="px-badge px-badge--brand">Subtle</span><span class="px-badge px-badge--success">Subtle</span><span class="px-badge px-badge--danger">Subtle</span></div>
  <div class="row"><span class="px-badge px-badge--solid">Solid</span><span class="px-badge px-badge--solid px-badge--brand">Solid</span><span class="px-badge px-badge--solid px-badge--success">Solid</span><span class="px-badge px-badge--solid px-badge--warning">Solid</span><span class="px-badge px-badge--solid px-badge--danger">Solid</span></div>
  <div class="row"><span class="px-badge px-badge--outline">Outline</span><span class="px-badge px-badge--outline px-badge--brand">Outline</span><span class="px-badge px-badge--outline px-badge--info">Outline</span></div>
</div>

Sizes, icon and close

Small Medium Large

HTML

<div class="row" style="align-items:center">
  <span class="px-badge px-badge--sm px-badge--brand">Small</span>
  <span class="px-badge px-badge--brand"><svg class="px-icon" aria-hidden="true">…</svg>Medium</span>
  <span class="px-badge px-badge--lg px-badge--brand" data-px-dismissible>Large<button type="button" class="px-badge__close" data-px-dismiss aria-label="Remove"><svg class="px-icon" aria-hidden="true">…</svg></button></span>
</div>

Count

Numeric counter. Cap at 99+.

899+32

HTML

<div class="row" style="align-items:center"><span class="px-count">8</span><span class="px-count px-count--danger">99+</span><span class="px-count px-count--neutral">3</span><span class="px-count px-count--sm">2</span></div>

API reference

Class / attribute	Type	Description
`px-badge`	class	Neutral subtle by default.
`px-badge--brand · --success · --warning · --danger · --info`	class	Color.
`px-badge--solid · --outline`	class	Style.
`px-badge--sm · --lg`	class	Size.
`px-badge__dot · px-badge__close`	class	Dot and close button.
`px-count · --danger · --neutral · --sm`	class	Badge / Count.

Figma properties

Badge54 variants · page “Badge”Open

Short status or category label. Subtle for most UI, Solid for high emphasis, Outline on busy backgrounds. Keep to 1–2 words; colour must not be the only cue (pair with text or icon).

Property	Type	Values
Label	Text	“Label”
Dot	Boolean	—
Leading icon	Boolean	—
Leading icon swap	Instance swap	—
Close	Boolean	—
Color	Variant	Neutral Brand Success Warning Danger Info
Style	Variant	Subtle Solid Outline
Size	Variant	Small Medium Large

Badge / Count6 variants · page “Badge”Open

Numeric counter for notifications and unread items. Cap at 99+.

Property	Type	Values
Count	Text	“8”
Color	Variant	Brand Danger Neutral
Size	Variant	Small Medium

Design tokens

Component tokens from the Figma Component collection. Override them to restyle just this component.

Token	Alias	Light value
`--px-badge-neutral-subtle-content`	color-content-neutral-secondary	#475467
`--px-badge-success-subtle-content`	color-content-success-default	#027a48
`--px-badge-danger-subtle-content`	color-content-danger-default	#b42318
`--px-badge-radius`	radius-full	999px
`--px-badge-gap`	spacing-4	4px
`--px-badge-count-size-sm`	16px	16px
`--px-badge-count-size-md`	20px	20px
`--px-badge-height`	spacing-20	20px
`--px-badge-padding-x`	spacing-8	8px

Accessibility

Counts on icons need an accessible name, e.g. aria-label="8 unread".