Badge

A compact label for status, role, or category. In Nuxt / PLAI use UBadge, StatusBadge, or RoleBadge — not ci-badge markup.

Variants that use brand blue or orange are CI; neutral chips use Nuxt UI zinc. Specimen labels describe visual variants, not PLAI product semantics (e.g. team-table Admin uses app-specific colours in frontend-plai).

Live examples

Member Neutral Nuxt UI

Primary Primary emphasis CI

Invited Info CI

New Brand accent CI

Draft Outline Nuxt UI

Live status

Use role="status" when the label updates asynchronously (e.g. job progress):

Processing

Small size

Active Neutral chip Nuxt UI

Pending Info chip CI

HTML

<span class="ci-badge ci-badge--neutral">Member</span>
<span class="ci-badge ci-badge--primary">Primary</span>
<span class="ci-badge ci-badge--info">Invited</span>
<span class="ci-badge ci-badge--brand">New</span>
<span class="ci-badge ci-badge--outline">Draft</span>

Accessibility

• Badges are text labels, not controls — keep them as <span> (or similar) unless the product intentionally makes them interactive.
• Do not convey meaning with colour alone; the visible text must make the status clear without the variant colour.
• For asynchronously updating labels (e.g. “Processing”), add role="status" so assistive tech announces changes.
• Prefer short, concrete copy (“Invited”, “Failed”) over vague colour-only chips.
• Interactive badges (rare) must be a real control (<button> / link), keyboard-focusable, with a visible :focus-visible ring — do not put tabindex on a decorative <span>.

Tokens (docs reference only)

Pattern tokens live in docs-tokens.css on this site — not in the npm export.

Token	CSS variable	Source
Neutral bg / text	--ci-badge-neutral-*	Nuxt UI
Primary bg / text	--ci-badge-primary-*	CI brand blue mix
Info bg / text	--ci-badge-info-*	CI link blue mix
Brand bg / text	--ci-badge-brand-*	CI brand orange mix

When to use

Scenario	Variant	Source
Generic neutral label (role, category)	ci-badge--neutral	Nuxt UI
Primary / elevated emphasis	ci-badge--primary	CI
Informational state (invited, in progress)	ci-badge--info	CI
Marketing or “new” highlight	ci-badge--brand	CI
Low-emphasis tag on dense UI	ci-badge--outline	Nuxt UI

In PLAI

Use StatusBadge, RoleBadge, or UBadge. Product-specific colours (e.g. team-table roles and statuses) are defined in frontend-plai — see docs/ui-patterns.md there.