Badge
A small label used to highlight status, counts, or metadata associated with an element.
Variants
Themes
Props
| Name | Default | Type |
|---|---|---|
theme | "gray" | "blue" | "red" | "green" | "gray" | "orange" Visual color theme of the badge |
size | "md" | "sm" | "md" | "lg" Controls the size of the badge |
variant | "subtle" | "subtle" | "outline" | "solid" | "ghost" Visual style of the badge |
label | - | string | number | Label Content displayed inside the badge |
Slots
| Slot | Payload |
|---|---|
prefix | - Content shown before the badge label |
default | - Main badge content (overrides `label` prop) |
suffix | - Content shown after the badge label |