Badge (c-badge) · MCSS-Lite

Pick this part

Pick c-badge for

Showing the status of an item: Draft, Active, Failed.
A short category or plan label: Beta, Pro.

Pick another part for

Anything clickable, removable or filterable: use c-button with c-button--sm.
A count on a navigation item: badges here are for status words, not numbers.
A sentence: use body text or an alert.

Build it

Start with <span> and add class="c-badge".
Pick at most one tone modifier: --primary, --success, --warning, --error, --info.

Draft New Active Expiring Failed Beta

Show markup 8 lines

<div class="l-cluster">
  <span class="c-badge">Draft</span>
  <span class="c-badge c-badge--primary">New</span>
  <span class="c-badge c-badge--success">Active</span>
  <span class="c-badge c-badge--warning">Expiring</span>
  <span class="c-badge c-badge--error">Failed</span>
  <span class="c-badge c-badge--info">Beta</span>
</div>

Check your build

Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.

Fits

Say the status in words; the tone only supports it.

Failed Passed

Show markup 4 lines

<div class="l-cluster">
  <span class="c-badge c-badge--error">Failed</span>
  <span class="c-badge c-badge--success">Passed</span>
</div>

validate: 0 issues

Doesn't fit

Don't make a badge clickable or invent tones.

<span class="c-badge c-badge--danger">Failed</span>

validate

error Unknown class "c-badge--danger". Valid modifiers of c-badge: --primary, --success, --warning, --error, --info. Only classes from the MCSS-Lite contracts exist. [unknown-class]

Spec sheet

Apply to <span>

Modifiers
Class	Group	What it does
`c-badge--primary`	tone (pick one)	Brand emphasis, e.g. "New".
`c-badge--success`	tone (pick one)	Positive status, e.g. "Active".
`c-badge--warning`	tone (pick one)	Needs attention, e.g. "Expiring".
`c-badge--error`	tone (pick one)	Negative status, e.g. "Failed".
`c-badge--info`	tone (pick one)	Neutral information, e.g. "Draft".

Show tokens 4

Tokens
Token	Value (light / dark)
`--badge-background`	`#e9ecef` / `#27436f`
`--badge-text`	`#343a40` / `#cfdae5`
`--color-action-primary`	`#005a9c` / `#2576cc`
`--color-text-on-action`	`#ffffff` / `#ffffff`

Accessibility

Color is decorative; the badge text must describe the status on its own.

Wording

One or two words, sentence case: "In review", not "IN REVIEW".
Each tone keeps one meaning across the product: error always means something failed.

All content rules

Badge c-badge