Badge
Tiny status / count indicator — 4–12 px in size. Three variants: Dot (solid colored disc, no content), Label (count text 1–4 digits), and Verify (check-mark icon for verified status). Seven semantic colours (Brand · Info · Danger · Success · Warning · Notice · Alert) matching the rest of the system. Mirrors Figma node 123-2217 / 123-2267 (light) + 5926-1828 / 5926-1773 (dark) 1:1.
When to use
- Use Label badge for notification counts and numeric status indicators
- Use Dot badge for unread / active indicators where a count isn't needed
- Use Verify badge to indicate a verified or trusted entity
- Compose with Avatar (
.avatar-pin-*), Button, and Tabs - Keep label text to 1–4 digits — truncate to "99+" for large counts
- Use Badge for primary actions — use Button instead
- Use Label badge without a count context — use a Tag instead for status labels
- Show more than 3 digits without truncating to "99+"
- Use Badge without ensuring it has sufficient colour contrast against its surface
DigiLawyer Patterns
No specific DigiLawyer patterns documented yet — to be added.
Anatomy
Badge has three variants — Dot, Label, and Verify — all sharing the same base token structure.
- 1Base —
.badge. Circular pill with 1px halo border that separates it from any surface. - 2Dot variant —
.badge-dot. Solid coloured disc, no content. 8px default size. - 3Label variant —
.badge-label. Pill with count text. Expands horizontally with content. - 4Verify variant —
.badge-verify. Checkmark icon for verified/trusted status. - 5Colour modifier —
.badge-brand/.badge-info/.badge-dangeretc. Seven semantic colours.
Default
The minimal badge is a single .badge with a colour modifier. Default variant is Dot at the default 8px size in Brand colour. A 1px halo border separates the badge from whatever surface it sits on — white halo in light, page-bg halo in dark.
<span class="badge badge-dot badge-brand" aria-label="Active"></span>
Variants
Three structural variants. Dot is a content-less solid disc used as an inline status marker. Label auto-sizes around 1–4 digits of count text — height stays fixed at 12px, width grows. Verify is a check-mark icon — typically Info-blue and used for "verified account" or "trusted" status.
Sizes
Three sizes per variant, mapped 1:1 to Figma's symbol names. Dot / Verify are square: .badge-sm 4×4, default md 8×8, .badge-lg 12×12. Label is a pill that auto-fits content: .badge-sm 12 px tall, default md 16 px tall, .badge-lg 20 px tall. Min-width equals the pill height so a 1-digit label renders as a circle; 2 / 3 / 4-digit content grows the pill width. Text scales with height — 8 / 10 / 12 px Semi Bold.
Colors
Seven semantic colours mirroring Snackbar's intent palette. Brand for the default neutral chip, Info (blue), Success (green), Warning (yellow), Danger (red), Notice (purple), Alert (orange). Brand inverts in dark mode (white tile + dark text) so it stays readable on the dark page surface.
Composition
Pin a badge to the top-right of any inline-block parent — button, avatar, tab, nav icon — using the .badge-pin helper. The badge anchors at top: -4px; right: -4px (one badge unit outside the host) and the halo border separates it from the host surface in both themes.
Full matrix
7 colours × 3 sizes (Dot) + 7 colours × 4 max-num widths shown at the default md (16 px) label height — mirroring Figma's two badge frames combined. Brand inverts in dark mode (the only colour with a state-flip between modes). Refer to the Sizes section above for the 3 × 4 label size matrix.
Accessibility
| Attribute / Behaviour | Value | Notes |
|---|---|---|
| Count announcement | aria-label="12 notifications" | The number alone is not sufficient — add context via aria-label |
| Dynamic count | aria-live="polite" | When the count updates dynamically, wrap in a live region so screen readers announce changes |
| Dot badge | aria-label="Unread" | Dot has no visible text — always provide a label |
| Verify badge | aria-label="Verified" | Checkmark icon needs a text alternative |
| Decorative badge | aria-hidden="true" | If the count is already announced elsewhere on the page, hide the badge from screen readers |
API
| Class / attr | On | Description |
|---|---|---|
| .badge | <span> | Base. Inline-flex disc with a 1px halo border, full radius. Default variant is Dot (8×8 square at md). Default colour is Brand. Add .badge-label to switch to the auto-width count pill (16 px tall at md). |
| .badge-dot | .badge | Dot variant — no text content, solid colored disc. Use as an inline status marker. Pair with aria-label describing the state. |
| .badge-label | .badge | Label variant — auto-width pill containing 1–4 digits of count text. Default height is 16 px (Figma "Small(16px)"); pair with .badge-sm or .badge-lg to swap to the 12 px or 20 px pill. Width auto-grows with digit count; min-width = height so the 1-digit form is circular. Inter Semi Bold; font scales 8 / 10 / 12 px with height. |
| .badge-verify | .badge | Verify variant — fills with an SVG check icon (typically #ico-badge-check). Typically pairs with .badge-info (blue) for "Verified" / "Trusted" status. |
| .badge-sm | .badge | Small. Dot / Verify: 4×4 square. Label: 12 px tall pill, 8 px font. Use for ambient status indicators where the badge shouldn't compete with content. |
| (no size class) | .badge | Medium (default). Dot / Verify: 8×8 square. Label: 16 px tall pill, 10 px font (Caption 2 Semi Bold). |
| .badge-lg | .badge | Large. Dot / Verify: 12×12 square. Label: 20 px tall pill, 12 px font. Use when the badge needs to read clearly at a glance (e.g. on a larger avatar or nav icon). |
| .badge-brand / -info / -danger / -success / -warning / -notice / -alert | .badge | Colour modifier. Required — pick exactly one. Brand inverts in dark mode (white tile + dark text); the other six keep the same vivid bg + white text in both modes. |
| .badge-pin | <span>/<div> | Helper wrapper. Drop the host element + a child .badge inside; the badge anchors at top: -4px; right: -4px of the host. Works on any inline-block element. |
| aria-label | .badge | For dot + verify variants (which have no visible text), describe what the badge indicates so screen-reader users get the context. |