Contentstable

Badge

A compact, uppercase, non-interactive label for status and metadata — info, success, warning, error, or a register tone.

Examples

Tones

Draft Beta Live Deprecated Failing Workshop API

HTML for “Tones”

<div class="mp-cluster" data-gap="2">
  <span class="mp-badge">Draft</span>
  <span class="mp-badge" data-tone="info">Beta</span>
  <span class="mp-badge" data-tone="success">Live</span>
  <span class="mp-badge" data-tone="warning">Deprecated</span>
  <span class="mp-badge" data-tone="error">Failing</span>
  <span class="mp-badge" data-tone="human">Workshop</span>
  <span class="mp-badge" data-tone="digital">API</span>
</div>

With status dot

Online Degraded Offline

HTML for “With status dot”

<div class="mp-cluster" data-gap="2">
  <span class="mp-badge" data-tone="success" data-variant="dot">Online</span>
  <span class="mp-badge" data-tone="warning" data-variant="dot">Degraded</span>
  <span class="mp-badge" data-tone="error" data-variant="dot">Offline</span>
</div>

Guidance

Badges report state: "Draft", "Live", "Deprecated", "Pass". They are small and quiet; tone carries the meaning, the word carries it too.

Accessibility

The word is the message; color is reinforcement. Never use a colored badge with no text.
If a badge updates live (e.g. build status), put it inside an element with role="status".

API

Badge classes
Class	Kind
`.mp-badge`	root

Badge attributes
Attribute	Values
`data-tone`	`info` · `success` · `warning` · `error` · `human` · `digital`
`data-variant`	`dot`

Badge component tokens
Token	Default	Light · dark
`--mp-badge-bg`	`var(--color-bg-tertiary)`	`#E2DCD2` · `#2E2E34`
`--mp-badge-fg`	`var(--color-text-secondary)`	`#5C564E` · `#A39D93`

Design tokens consumed: --color-bg-tertiary --color-digital-bg --color-digital-text --color-error-bg --color-error-text --color-human-bg --color-human-text --color-info-bg --color-info-text --color-success-bg --color-success-text --color-text-secondary --color-warning-bg --color-warning-text --font-sans --leading-label --radius-full --radius-sm --space-1 --space-2 --text-xs --tracking-label --weight-semibold

Verified contrast

The build measures each pair for the defaults and for every tone, variant and state that reassigns a token, over page and card surfaces. The ratios below are the worst case in each mode; a pair below its minimum stops the build.

Badge contrast pairs
Use	Pair	Light	Dark	Minimum
badge label	`--mp-badge-fg` on `--mp-badge-bg`	4.65	4.95	4.5

Source

README on GitHub CSS on GitHub Manifest (JSON)