> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Badge

> Badge.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Badge Types" icon="square-1">
    Supports multiple types (<code>number</code>, <code>hollow</code>) for flexible display styles.
  </Card>

  <Card title="Slot Support" icon="square-2">
    Allows for the inclusion of custom content, such as icons or text.
  </Card>

  <Card title="Dynamic Content" icon="square-3">
    The default slot displays the main badge content.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { Badge } from '@robojuice/velure-ui';
```

```vue theme={null}
<Badge type="number">1</Badge>
<Badge type="number">100</Badge>
<Badge type="hollow">A hollow badge</Badge>
```

***

## Props

<ParamField path="type" type="string" default="''">
  Defines the type of badge. Supported values: `number`, `hollow`.
</ParamField>

***

## Slots

<ParamField path="default" type="slot">
  The main content of the badge.
</ParamField>

<ParamField path="iconLeft" type="slot">
  Slot for an icon or element on the left side. `<template #iconLeft></template>`
</ParamField>

<ParamField path="iconRight" type="slot">
  Slot for an icon or element on the right side. `<template #iconRight></template>`
</ParamField>

***

## Example Use Cases

### Number Badge

```vue theme={null}
<Badge type="number" class="bg-green-700">100</Badge>
```

### Hollow Badge

```vue theme={null}
<Badge type="hollow">A hollow badge</Badge>
```

### Badge with Icons

```vue theme={null}
<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.