Badge

Small solid or soft label for a fixed category or count, with status colour variants.

Preview

Variants

Preview

Default Soft Live Beta Down

HTMLReact

Copy

<span class="nx-badge">Default</span> <span class="nx-badge nx-badge--soft">Soft</span> <span class="nx-badge nx-badge--success"><span class="nx-badge__dot"></span>Live</span> <span class="nx-badge nx-badge--warning">Beta</span> <span class="nx-badge nx-badge--danger">Down</span>

Copy

<NxBadge>Default</NxBadge>
<NxBadge variant="soft">Soft</NxBadge>
<NxBadge variant="success" dot>Live</NxBadge>
<NxBadge variant="warning">Beta</NxBadge>
<NxBadge variant="danger">Down</NxBadge>

API

React props (NxKit)

React (NxKit) props

Prop	Type	Default	Required	Description
variant	"solid"|"soft"|"info"|"success"|"warning"|"danger"	"solid"		Fill/tint + status colour.
dot	boolean	false		Prefix a status dot.

Classes

Framework-agnostic classes

Class	Description
.nx-badge	Solid accent fill
.nx-badge--soft	Accent-100 tint
.nx-badge--success	Solid-fill success token
.nx-badge--warning	Warning tint, dark text
.nx-badge--danger	Solid-fill danger token
.nx-badge__dot	currentColor status dot

Accessibility

• Status badges pair colour with the word itself ("Live", "Down") — never colour/dot alone.

Do / Don’t

• ✓Do: Use --success/--warning/--danger only for real status meaning.✕Don’t: Don't use badge as a clickable control — it has no interactive semantics.

Related

Status pill Alert

View in spec →

View source: registry.js ↗