Badge
A small pill for numeric counters — unread counts, story points, +/− deltas. Use it next to a label or inside .issue-card-meta / .board-column-header. For status words use .lozenge instead; for free-text labels use .tag.
Root: .badge on <span>
Examples
Example 1
25
<span class="badge">25</span>Example 2
8
<span class="badge badge-important">8</span>Authoring tags — <lz-badge>
25
8
Authoring source
<lz-badge>25</lz-badge>
<lz-badge appearance="important">8</lz-badge>Expands to
<span class="badge" data-lz="badge" data-lz-version="0.1.0">25</span>
<span class="badge badge-important" data-lz="badge" data-lz-version="0.1.0">8</span>Authoring tags are macro-expanded to the canonical HTML above at build time (Vite plugin or lz-expand CLI) — the shipped artifact has no runtime.
Contract
Variants & modifiers
| Class | Axis | Rules |
|---|---|---|
badge-primary | tone | optional · exclusive |
badge-important | tone | optional · exclusive |
badge-added | tone | optional · exclusive |
badge-removed | tone | optional · exclusive |
Accessibility
The number is the accessible name. A bare number can be ambiguous to screen-reader users out of context; pair the badge with visible text, or add aria-label / visually-hidden text describing what is being counted (e.g. "3 comments").
Nesting
Allowed in:
inline text.issue-card-meta.board-column-headertable cellsbuttons and nav items
Never inside (or containing):
.badge