CountBadge

Badge component for displaying counts or numeric values. Available in Primary (red) and Secondary (dark gray) variants.

When to use

check_circleWhen to use

  • For showing notification counts
  • For indicating unread messages or items
  • When displaying a number associated with a navigation item
  • For compact numeric indicators

cancelWhen not to use

  • For status indicators without numbers (use colored dots)
  • For large numbers (consider abbreviating, e.g., "99+")
  • As the primary action element

Primary

Examples

Red badge for high-visibility counts

29
Default
99+
With text
1
Single digit
1234
Large number

Secondary

Examples

Dark gray badge for subtle counts

29
Default
99+
With text
1
Single digit
1234
Large number

Usage

tsx
import { CountBadge } from '@/components/CountBadge';

// Primary (red)
<CountBadge type="primary" value={29} />
<CountBadge type="primary" value="99+" />

// Secondary (dark gray)
<CountBadge type="secondary" value={5} />

Props

PropTypeDefaultDescription
value*string | number—The count value to display
type'primary' | 'secondary''primary'Visual style of the badge

Accessibility

  • Uses appropriate contrast ratios for visibility
  • Consider adding aria-label for screen readers
  • Pair with descriptive text for context