Badge

A compact status label, category marker, or count.

Examples

Default

Active

<Badge label="Active" color="neutral" />

With Icon

Verified

<Badge label="Verified" color="success" icon={CheckCircle2} />

Count

42

<Badge label={42} color="info" />

Large Count

1429999+1234

<HStack align="center" gap={2}>
  <Badge color="info" label={1} />
  <Badge color="info" label={42} />
  <Badge color="info" label={99} />
  <Badge color="error" label="99+" />
  <Badge color="error" label={1234} />
</HStack>

Sizes

SmallMediumLarge

<HStack align="center" gap={2}>
  <Badge color="info" icon={CheckCircle2} label="Small" size="sm" />
  <Badge color="info" icon={CheckCircle2} label="Medium" size="md" />
  <Badge color="info" icon={CheckCircle2} label="Large" size="lg" />
</HStack>

Colors

neutralinfosuccesswarningerrorbluecyangreenorangepinkpurpleredtealyellow

<HStack gap={2} wrap="wrap">
  {colors.map(color => (
    <Badge color={color} key={color} label={color} />
  ))}
</HStack>

API

Badge

A compact status label, category marker, or count.

Prop	Type	Default	Description
aria-label	string	—	Accessible label for the badge.
className	string	—	Additional CSS class names applied to the badge.
color	"error" | "info" | "success" | "warning" | "red" | "orange" | "yellow" | "green" | "teal" | "cyan" | "blue" | "purple" | "pink" | "gray" | "neutral"	'neutral'	Visual color.
data-testid	string	—	Test ID applied to the badge.
icon	IconComponent	—	Optional icon rendered before the label.
label*	string | number	—	Badge text or count.
ref	Ref<HTMLSpanElement>	—	Ref forwarded to the badge element.
role	'status' | 'alert' | 'log' | (string & {})	—	ARIA role for the badge element. Common choices: - 'status' — a live region whose content is advisory (e.g. "3 new"). - 'alert' — an urgent, time-sensitive message (e.g. error counts). - 'log' — appended information such as chat counts or activity feeds. Any valid ARIA role string is accepted.
size	"sm" | "md" | "lg"	'md'	Badge size.
style	CSSProperties	—	Inline styles applied to the badge.