Badge
A badge displays a small label used to highlight a status or category.
Badge
Variants
DefaultPrimaryOutlineSuccessWarningErrorInfo
Colors
In addition to the semantic variants above, Badge supports every Tailwind base color as a variant.
slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
Sizes
SmallMedium
Component props
| Name | Type | Description |
|---|---|---|
| variant | string | "default" | "primary" | "outline" | "success" | "warning" | "error" | "info" | any Tailwind base color ("slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose") (default: "default") |
| size | string | "sm" | "md" (default: "md") |