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

import { Badge } from '@robojuice/velure-ui';

<Badge type="number">1</Badge>
<Badge type="number">100</Badge>
<Badge type="hollow">A hollow badge</Badge>

​
Props

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

​
Slots

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

​
Example Use Cases

​
Number Badge

<Badge type="number" class="bg-green-700">100</Badge>

​
Hollow Badge

<Badge type="hollow">A hollow badge</Badge>

​
Badge with Icons

<Badge type="number">
  <template #iconLeft>
    <svg>...</svg> <!-- Left Icon -->
  </template>
  <template #iconRight>
    <svg>...</svg> <!-- Right Icon -->
  </template>
  Badge Content
</Badge>

​
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.