Badge
Badges are used to display a status of an object or action that a component has performed. Often used inside tables and other data lists.
Props
| Name | Default | Type |
|---|---|---|
variant | neutral | neutral danger warning success info accent note The visual style of the badge |
outline | false | boolean Whether to show the badge with an outline style |
filled | false | boolean Whether to show the badge with a filled background |
size | m | s m l Controls the size of the badge |
circle | false | boolean Renders the badge as a circle. Useful for numeric counters or status dots |
Slots
| Name | Accepts | Description |
|---|---|---|
default | any | Content to display inside the badge |
Tokens
CSS variable tokens used for global or per-instance manipulation of certain styling.
| Token | Default | Description |
|---|---|---|
--vui-badge-padding-block | 2px | Vertical padding |
--vui-badge-padding-inline | var(--space-s) | Horizontal padding |
--vui-badge-font-size | var(--font-size-s) | Font size |
--vui-badge-height | 24px | Badge height |