Badge

A Badge is a word with a colour, or a number. A word badge is a <span> with no role: the word carries the meaning, and the colour repeats it, so a reader who cannot see the colour loses nothing. A count is the case with something to get right, because “3” read alone means nothing. So a count badge draws the digit and is read as its accessibilityLabel.

DraftNewOverdue33 unread messages99+240 failed checks

BadgeDemo.tsx

import { View } from '@hozo/core'
import { Badge } from '@hozo/ui'

export function BadgeDemo() {
  return (
    <View className="flex-row flex-wrap items-center gap-2">
      <Badge>Draft</Badge>
      <Badge tone="accent">New</Badge>
      <Badge tone="danger">Overdue</Badge>
      <Badge tone="accent" count={3} accessibilityLabel="3 unread messages" />
      <Badge tone="danger" count={240} max={99} accessibilityLabel="240 failed checks" />
    </View>
  )
}

• tone: neutral (the default), accent or danger.
• count: a number to show instead of the children.
• max: above it, the badge shows 99+ (for max={99}). There is no default, so without it every digit is shown.
• accessibilityLabel: what a count is read as, such as “3 unread messages”. Without it, an overflowing count is read as “more than 99”.