Badge
The Badge component is used to represent a user or entity.
gray
gray
gray
gray-subtle
gray-subtle
gray-subtle
blue
blue
blue
blue-subtle
blue-subtle
blue-subtle
purple
purple
purple
purple-subtle
purple-subtle
purple-subtle
amber
amber
amber
amber-subtle
amber-subtle
amber-subtle
red
red
red
red-subtle
red-subtle
red-subtle
pink
pink
pink
pink-subtle
pink-subtle
pink-subtle
green
green
green
green-subtle
green-subtle
green-subtle
teal
teal
teal
teal-subtle
teal-subtle
teal-subtle
inverted
inverted
inverted
Installation
Usage
green-subtle
Examples
variant
The variant of the badge (e.g., "gray", "red", etc...).
gray
gray-subtle
blue
blue-subtle
purple
purple-subtle
amber
amber-subtle
red
red-subtle
pink
pink-subtle
green
Green-Subtle
teal
teal-subtle
inverted
size
The size of the badge (e.g., "sm", "md", "lg").
gray
gray
gray
icon
An optional icon to display before the badge content.
gray
gray
gray
Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | green-subtle | gray | gray-subtle | blue | blue-subtle | purple | purple-subtle | amber | amber-subtle | red | red-subtle | pink | pink-subtle | green | green-subtle | teal | teal-subtle | inverted | "gray" | The color variant of the badge. |
| size | sm | md | lg | "md" | The size of the badge. |
| icon | React.ReactNode | null | The icon to display in the badge. |
| children | React.ReactNode | null | The content of the badge. |