Badge

A small inline pill for tags, counts, and status. Class + data-attribute API mirrors the Button: one .x-badge class plus data-variant, data-size, data-accent. No focus styles or pointer cursor — badges aren’t interactive.

Install

import "elements-kit/ui/styles/theme.css";
import "elements-kit/ui/styles/scaling.css";
import "elements-kit/ui/styles/radius.css";
import "elements-kit/ui/styles/space.css";
import "elements-kit/ui/styles/typography.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/styles/palette/green.css";
import "elements-kit/ui/styles/accent/green.css";

import "elements-kit/ui/badge/badge.css";

unset.css is not required for <span>s — they have no native styling that bleeds through. Badges on a <button> or <a> should add unset to neutralise the native rendering first.

API

<span
  class="x-badge"
  data-variant="soft"
  data-size="2"
  data-accent="green"
>
  New
</span>

Attribute	Values
`data-variant`	`solid`, `soft`, `surface`, `outline`
`data-size`	`1`, `2`, `3`
`data-accent`	any imported color scale (`green`, `blue`, `iris`, …)
`data-high-contrast`	modifier — boosts contrast against the page background

Sizing

`data-size`	font-size	padding
`1`	`--font-size-1`	`space-1/2` × `space-1.5`
`2`	`--font-size-1`	`space-1` × `space-2`
`3`	`--font-size-2`	`space-1` × `space-2.5`

Border radius scales with data-radius on a parent — see Radius below.

Variants

solid — accent fill, high-contrast text. Counts and primary statuses.
soft — tinted background. Default for tags.
surface — outlined panel with subtle fill.
outline — bordered, transparent fill.

Radius

Set data-radius="<value>" on a parent to control corner radius for everything beneath. The badge follows the same radius-1..radius-6 scale as Button:

<div data-radius="pill">
  <span class="x-badge" data-variant="soft">Pill</span>
</div>
<div data-radius="none">
  <span class="x-badge" data-variant="soft">Square</span>
</div>

Available values: none, small, medium, large, pill. Each maps to a --radius-factor multiplier; pill additionally sets --radius-pill: 9999px for fully rounded pills.

Theming

Switch the color on a single badge with data-accent="<color>", or set it on any ancestor (e.g. <body>) to theme the whole subtree.

<span class="x-badge" data-variant="soft" data-accent="amber">
  Beta
</span>

Light/dark flips automatically via the .dark class on a parent — see Light & dark.

Accessibility

.x-badge ships with no ARIA role — it’s a pure visual class. Add a role yourself based on what the badge means:

Pattern	Markup
Decorative — text repeats surrounding context	`<span class="x-badge">New</span>`
Status — info not present elsewhere	`<span class="x-badge" role="status">3 unread</span>`
Live status — value can change at runtime	`<span class="x-badge" role="status" aria-live="polite">{count}</span>`
Icon-only — no text inside the badge	`<span class="x-badge" role="img" aria-label="Online"></span>`
Purely decorative dot — duplicates labeled text nearby	`<span class="x-badge" aria-hidden="true"></span>`

Default to no role when the badge text already lives in the surrounding label — extra roles add noise to assistive tech. Reach for role="status" only when the badge contributes information a sighted reader would otherwise miss.