Badge

The Badge family covers four distinct use-cases: BadgeIndicator (colored dot), BadgeStatus (semantic chip), BadgeNumber (numeric counter), and BadgeNotificationCount (notification overlay).

Installation

pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-default

Usage

import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';
import {
	BadgeIndicator,
	BadgeNotificationCount,
	BadgeNumber,
	BadgeStatus,
} from '@infinitibit_gmbh/ui';

---

BadgeIndicator

A small colored dot conveying presence or availability. Purely decorative (aria-hidden); wrap it in a parent with meaningful text when status context is needed.

<BadgeIndicator color="success" size="md" />
<BadgeIndicator color="warning" size="sm" />

color prop

Value	Token
success	--ib-color-status-success-text
warning	--ib-color-status-warning-text
error	--ib-color-status-critical-text
info	--ib-color-status-info-text
default	--ib-color-text-secondary
disabled	--ib-color-action-primary-muted-bg

size prop

Value	Diameter
sm	8 px
md (default)	12 px
lg	14 px

---

BadgeStatus

A pill chip that communicates semantic status — text-only, with a leading icon, or with a leading indicator dot.

<BadgeStatus status="success" type="text">Success</BadgeStatus>
<BadgeStatus status="error" type="indicator">Error</BadgeStatus>
<BadgeStatus status="warning" type="icon" icon={<MyIcon />}>Warning</BadgeStatus>

Indicator type

Use type="indicator" to show a dot + text label without a background fill.

Props

Prop	Type	Default
status	'success' | 'error' | 'default' | 'processing' | 'warning'	'success'
type	'text' | 'icon' | 'indicator'	'text'
icon	ReactNode	—
children	ReactNode	label text

type="text" and type="icon" render a colored pill (background + matching text color). type="indicator" renders a dot + text in --ib-color-text-primary with no background.

---

BadgeNumber

A small numeric counter badge, typically used to show a count (e.g. unread items).

<BadgeNumber count={5} active />
<BadgeNumber count={150} /> {/* renders "99+" */}
<BadgeNumber count={150} max={999} /> {/* renders "150" */}

When count exceeds max, it renders {max}+. The aria-label always carries the actual count so screen readers announce the true value.

Props

Prop	Type	Default
count	number	required
max	number	99
shape	'square' | 'rounded'	'square'
active	boolean	false

active={true} fills with --ib-color-action-primary-bg (primary blue) and white text. active={false} uses the muted grey background.

---

BadgeNotificationCount

A notification overlay badge, typically positioned over an icon button. Uses the critical color ramp by default to draw attention.

<BadgeNotificationCount count={3} />       {/* "3" */}
<BadgeNotificationCount count={150} />     {/* "99+" */}
<BadgeNotificationCount />                 {/* bare red dot */}

When count is omitted, renders a bare circular dot (aria-hidden). When provided, the aria-label carries the actual count for screen readers.

Props

Prop	Type	Default
count	number	— (dot)
max	number	99
size	'small' | 'medium'	'medium'

Single-digit counts render circular (16/20 px); multi-digit counts render as a pill.

---

Server & client

All four badge components are server-safe — no client-only hooks or state.

Accessibility

• BadgeIndicator and BadgeNotificationCount (no count) are aria-hidden — decorative visuals only. Use adjacent text or aria-label on the parent element to convey meaning.
• BadgeNumber and BadgeNotificationCount (with count) expose aria-label with the actual count so overflow rendering ("99+") does not mislead screen readers.
• BadgeStatus carries its text as accessible content — no additional ARIA needed.