Skip to main content
The Badge.vue component is a reusable Vue.js component for displaying small labels or tags. It supports different types such as numeric and hollow badges and allows for slot-based customization.

​
Features

Badge Types

Supports multiple types (number, hollow) for flexible display styles.

Slot Support

Allows for the inclusion of custom content, such as icons or text.

Dynamic Content

The default slot displays the main badge content.

​
Usage

​
Basic Example

​
Props

​
string
default:"''"
Defines the type of badge. Supported values: number, hollow.

​
Slots

​
slot
The main content of the badge.
​
slot
Slot for an icon or element on the left side. <template #iconLeft></template>
​
slot
Slot for an icon or element on the right side. <template #iconRight></template>

​
Example Use Cases

​
Number Badge

​
Hollow Badge

​
Badge with Icons

​
Notes

  • The type prop determines the badge’s appearance and behavior. For example:
  • number: Adjusts padding and minimum width for numeric badges.
  • hollow: Adds a border and changes text and border colors.
  • Slots allow customization of the badge’s content and additional elements, such as icons.
For further customization, refer to the component’s source code.