Theme:
Ui3nBadge
Badge component for displaying status indicators, notifications, and counts.
Props
| Name | Type | Default | Description |
|---|---|---|---|
id | string | undefined | — | Root element id |
dot | boolean | undefined | false | For simple display as a circle |
value | string | number | undefined | "" | Text displayed inside the circle |
color | string | undefined | "var(--color-bg-button-primary-default)" | Background color |
textColor | string | undefined | "var(--color-text-button-primary-default)" | Text color |
position | "right-top" | "right-bottom" | "left-top" | "left-bottom" | undefined | "right-top" | Positioning of the circle |
Slots
| Slot Name | Scope Props (v-slot) | Description |
|---|---|---|
#default | — | Default slot |
Usage Examples
Simple use
Simple use
Dot mode, position 'right-top', default color'
Value display
Value display
Display text/numbers inside the badge
Color customization
Color customization
Custom background and text color
Position variations
Position variations
All 4 positioning options
Standalone badge
Standalone badge
Badge without wrapper element (no default slot)
Overflow value (99+)
Overflow value (99+)
Display '99+' for large counts - typical pattern for notifications