Skip to main content

​
Badge

The Badge component displays a small status label or count. It’s often used for tags, categories, or notification counts.

​
Usage

<Badge label="New" color="blue" />

​
Props

​
label
string
Text to display inside the badge.
​
color
string
default:"gray"
Color theme: gray, red, blue, green, yellow, purple.
​
variant
string
default:"soft"
Visual style: solid, soft, outline.
​
size
string
default:"md"
Size preset: sm, md.
​
icon
string
Optional icon name to display before the label.

​
Examples

​
Status Badges

<Row gap="sm">
  <Badge label="Active" color="green" variant="soft" />
  <Badge label="Pending" color="yellow" variant="soft" />
  <Badge label="Error" color="red" variant="solid" />
</Row>