Badge

A compact visual indicator. In status mode it renders a coloured dot; in counter mode it renders a pill with a numeric count.

Overview

Badge has two modes controlled by the type prop:

status — a solid circular dot indicating a user or entity state (available, away, unavailable, invisible).
counter — a numeric pill. The count is only rendered visually when size is xl or larger; below that it's a dot with no text, relying on aria-label for screen readers.

The maxCount prop clamps large numbers, displaying {maxCount}+ when exceeded.

Import

import { Badge } from '@unflow/ui/components/Badge';

Props

Prop	Type	Default	Description
`type`	`'status' \| 'counter'`	`'counter'`	Mode of the badge
`status`	`'available' \| 'away' \| 'unavailable' \| 'invisible'`	`'available'`	Status variant (used when `type="status"`)
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'xl'`	Badge size
`count`	`number`	`0`	Numeric value (used when `type="counter"`)
`maxCount`	`number`	`999`	Max before `{n}+` label

All standard HTMLSpanElement props are forwarded. Always provide aria-label for accessibility.

Status

available

away

unavailable

invisible

<Badge type="status" status="available" size="md" aria-label="Available" />
<Badge type="status" status="away" size="md" aria-label="Away" />
<Badge type="status" status="unavailable" size="md" aria-label="Unavailable" />
<Badge type="status" status="invisible" size="md" aria-label="Invisible" />

Status	Color
`available`	`bg-green-600`
`away`	`bg-orange-500`
`unavailable`	`bg-red-500`
`invisible`	`bg-grey-400`

Counter

count: 3

count: 99

999+

maxCount: 999

<Badge type="counter" count={3} size="xl" aria-label="3 notifications" />
<Badge type="counter" count={99} size="xl" aria-label="99 notifications" />
<Badge type="counter" count={1024} maxCount={999} size="xl" aria-label="999+ notifications" />

When count exceeds maxCount, the label renders as {maxCount}+.

Sizes

<Badge type="counter" count={5} size="sm" aria-label="5 sm" />
<Badge type="counter" count={5} size="md" aria-label="5 md" />
<Badge type="counter" count={5} size="lg" aria-label="5 lg" />
<Badge type="counter" count={5} size="xl" aria-label="5 xl" />   {/* label visible from here */}
<Badge type="counter" count={5} size="2xl" aria-label="5 2xl" />
<Badge type="counter" count={5} size="3xl" aria-label="5 3xl" />

The count label is only rendered when size is xl or larger. For smaller sizes, position the badge as a visual dot overlay on an icon and rely on aria-label to communicate the count.

Customization (slotProps)

Slot	Props	Description
`label`	`BaseHTMLProps<HTMLParagraphElement>`	Override the counter text element

Accessibility

Renders a <span> with role="status" and aria-label.
Provide a meaningful aria-label even at small sizes where the count is visually hidden.
Pair with the element it annotates — e.g. wrap a button icon in a relative container and position the badge as an absolute overlay.

On this page