Badge

A small count and labeling component. Useful for notifications, status, or featuring numbers.

Usage

Basic Badge

Render a Badge with a label.

<Badge label="Badge" />

Variants

Change the visual appearance using the variant prop.

<Flex>
  <Badge label="Badge" variant="solid" />
  <Badge label="Badge" variant="ghost" />
  <Badge label="Badge" variant="outlined" />
</Flex>

Color, Radius & High Contrast

Customize the badge's appearance using color, radius, and highContrast props.

<Badge label="99+" color="red" radius="full" highContrast />

API

Props

Prop	Type	Default	Required
label	string | number	-	Yes
variant	'solid' | 'ghost' | 'outlined'	'solid'	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
size	Responsive<Size>	'medium'	-
highContrast	boolean	-	-