Status · §5.26

Badge

Counts and short labels.

Theme
Contrast
Language
Motion
Text size

Code

<CountBadge count={3} t={t} tone="highlight" />

Accessibility

  • Counts read as "3 new items", not a bare number.

Usage

Do

  • Neutral by default, highlight for "needs you".

Don't

  • Danger only for urgent.

Platforms

Web
apps/web/components/ui/badge.tsx, apps/web/components/edflow/person-avatar.tsx
iOS
SwiftUI .badge()
Android
Compose Badge