Counter Label
FreeA text label paired with a numeric counter, used for section headers, tab labels, and navigation items where an associated count provides context. Differs from Badge in that the number is inline with the label text rather than overlaid. Supports formatted numbers and optional max thresholds (e.g., "99+").
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Label text with an inline counter number. | Use for section headers with counts — "Comments (12)", "Unread (3)". |
| Outlined | ||
| Dot |
Usage Guidelines
Do
Use consistent formatting — "Comments (12)" or "Comments 12", not both.
Don't
Display zero counts unless the empty state is meaningful.
Do
Update counts in real-time when possible.
Don't
Use counter labels for status — use Badge instead.
Do
Use locale-aware number formatting for large counts.
Don't
Mix parenthetical and badge-style counters in the same UI.
Code
HTML
<span class="lex-counter-label">
<span class="lex-counter-label__text">Comments</span>
<span class="lex-counter-label__count">12</span>
</span>
...CSS Custom Properties
.lex-counter-label {
display: inline-flex;
align-items: center;
gap: var(--lex-counter-label-gap, 6px);
}
.lex-counter-label__count {
font-variant-numeric: tabular-nums;
color: var(--lex-counter-label-count-color, var(--lex-text-muted));
}
...React
// Using Lexicon CSS classes with React
<CounterLabel label="Comments" count={12} />
<CounterLabel label="Notifications" count={150} max={99} />
...Design Tokens
| Token | Value (dark) | Value (light) | CSS property |
|---|---|---|---|
| --lex-counter-bg | — | — | bg |
| --lex-counter-text | — | — | text |
| --lex-counter-size | — | — | size |
| --lex-counter-font-size | — | — | size |
Accessibility
- Screen readers should announce the full label — "Comments, 12" not just "12".
- Use aria-label on the container if the visual layout separates label and count.
- Counts that update dynamically should use aria-live="polite" for announcements.