Installation
CLI
Install the component using the StarUI CLI:
Examples
With Icons
Prepend or append icons, status dots, and spinners as Badge children
As Link
Pass href to render Badge as an anchor element with hover states
Clickable
Pass clickable=True to render as a semantic button element for interactive use
Custom Styling
Override size, shape, and color via cls — Badge has no built-in size props
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant |
Literal['default', 'secondary', 'outline', 'destructive'] |
'default' |
Visual style variant |
href |
str | None |
None |
URL to link to. Renders Badge as an <a> element with hover states |
clickable |
bool |
False |
Render as a <button> element for interactive badges |
cls |
str |
'' |
Additional CSS classes for size, shape, or color overrides |
| Component | Description |
|---|---|
Badge |
Inline label. Renders as <span> by default, <a> when href is set, <button> when clickable is True. Accepts arbitrary children — text, icons, status dots |