Design System

Count Badge

Count badges are compact circular indicators used for notification counts, unread items, or numeric labels. They use a single colour token pair that stays consistent across light and dark modes.

Sizes

Count badges come in two sizes. The default size (20px) works well alongside body text, while the small size (16px) fits tighter spaces like table cells or dense navigation.

Default

Small

Specifications

Background

count.badge.bg

Border Radius

50%

Text

count.badge.text

Font Weight

Medium 500

Small Size

16px 16px

Font Size (Small)

10px

Default Size

20px 20px

Font Size (Default)

11px

Theming

Count badge colours are driven by two semantic tokens. Unlike status badges, the count badge retains the same solid appearance in both light and dark modes for maximum visibility.

Property

Token

Light

Dark

Background

count.badge.bg

red.500

Text

count.badge.text

white

Best Practices

Use count badges for numeric indicators (notifications, unread items)

Keep counts short — use "9+" or "99+" for large numbers

Place count badges adjacent to the element they annotate

Use the small size in dense layouts like tables or compact nav

Don't

Don't use count badges for non-numeric labels — use status badges instead

Don't display zero counts — hide the badge when there is nothing to show

Don't override the red background — it signals urgency by convention

Don't place multiple count badges next to each other

Accessibility

High Contrast

White text on red.500 exceeds the WCAG AA contrast ratio of 4.5:1, ensuring legibility at small sizes in both light and dark modes.

Positional Context

Always place count badges next to the element they describe. The spatial relationship provides meaning beyond colour for users with colour vision deficiencies.

Screen Reader Support

Add an aria-label such as "8 unread notifications" to the parent element so screen readers convey the count with context. Use aria-live="polite" for dynamic updates.