Badge
A number or status marker that appears next to buttons or icons.
Basic Usage
Use the value prop to define the displayed number, and the type prop to set different types.
Maximum Value
Use the max prop to set the maximum value. Values exceeding the max will display {max}+.
Dot Badge
Use the is-dot prop to display a dot indicator.
Text Content
The value prop can also accept strings to display text content.
Custom Color
Customize the badge color through the color prop.
Offset
Customize the badge position through the offset prop.
Show Zero
By default, the badge is hidden when value is 0. Use the show-zero prop to force display.
Custom Content
Use the #content slot to customize the badge content.
Standalone
Can be used independently without wrapping any content.
Use in Nuxt
The Badge component fully supports Nuxt 3/4 SSR rendering. During server-side rendering, badge content and position are directly included in the generated HTML, ensuring users can see real-time notification status on initial page load, enhancing user experience.
SSR Notes:
- ✅ Initial value, maximum value limit (max) render correctly on the server
- ✅ Dot badge (is-dot) and standalone mode support SSR
- ✅ Custom color and offset take effect on initial page load
- 💡 Dynamic updates (e.g., real-time unread count via WebSocket) will be automatically completed through the reactive system after client-side activation
State Sync Recommendation
In the Nuxt ecosystem, it is recommended to store badge values in useState or Pinia for zero-cost state synchronization across routes and from SSR to Client.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| value | Display value | string | number | — |
| max | Maximum value, displays {max}+ when exceeded | number | 99 |
| is-dot | Whether to show a dot indicator | boolean | false |
| hidden | Whether to hide the badge | boolean | false |
| type | Badge type | 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'danger' |
| show-border | Whether to show border | boolean | true |
| color | Custom badge color | string | — |
| offset | Badge offset [x, y] | [number, number] | — |
| show-zero | Whether to show when value is 0 | boolean | false |
Slots
| Slot Name | Description |
|---|---|
| default | Element wrapped by the badge |
| content | Custom badge content |
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-badge-bg-color | Background color | var(--yh-color-danger) |
--yh-badge-text-color | Text color | #ffffff |
--yh-badge-font-size | Font size | var(--yh-font-size-xs) |