Styles live in scss/components/_badge.scss. Badges are compact status markers: a copy counter (24×24px) or a dot indicator (8×8px). Combine type and semantic modifiers (badge--information, badge--error, etc.).
Type Copy
Circular counter with Body/Small semi-bold typography. The visible number is the accessible name; keep counts short (for example 9+ for large values).
<span class="badge badge--copy badge--error">3</span>Type Dot
8×8px status dot with no visible text. Always expose meaning with aria-label (or aria-labelledby) and role="img".
<span class="badge badge--dot badge--success" role="img" aria-label="Online"></span>In context
Place a copy badge beside a control label, or a dot badge next to status text so sighted users and assistive tech get the same meaning.
Status
Class reference
| Class | Description |
|---|---|
.badge | Base inline-flex pill |
.badge--copy | 24×24px numeric counter |
.badge--dot | 8×8px indicator (no text) |
.badge--default | Primary / neutral emphasis |
.badge--information | Informational status |
.badge--warning | Warning status |
.badge--error | Error or alert count |
.badge--success | Success or positive status |
Customize (Sass)
-
Badge sizes
Adjust copy and dot dimensions when your density scale changes.@use "pimentcss-design-system" with ( $badge-copy-size: 1.5rem, $badge-dot-size: 0.5rem ); -
Rebuild CSS
Run after editing _badge.scss.npm run build:css
Accessibility (RGAA / WCAG)
Badges
- Copy badges, rely on visible text; avoid icon-only triggers that only show a number unless the control has an accessible name that includes the count.
- Dot badges, use
role="img"and a concisearia-label(for example “3 unread messages”, not just “Error”). - Color, do not use color alone: pair dots with visible text nearby or expose the status in the parent element’s label.
- Motion, when counts change, consider a polite
aria-liveregion on the parent widget, not on the badge itself.