Badge

Floating badge indicator that wraps around content to display counts, dots, or status.

¹²

³

¹

²

¹

<script setup lang="ts">
import { VxBadge } from 'veloxui'
</script>

<template>
  <VxBadge :value="12">
    <button>comments</button>
  </VxBadge>
  <VxBadge :value="3">
    <button>replies</button>
  </VxBadge>
  <VxBadge :value="1" type="primary">
    <button>messages</button>
  </VxBadge>
</template>

Max Value

When the count exceeds max, it shows as max+. Default max is 99.

⁸

⁹⁹⁺

⁹⁹⁹⁺

<template>
  <VxBadge :value="8" :max="10">
    <button>comments</button>
  </VxBadge>
  <VxBadge :value="100" :max="99">
    <button>replies</button>
  </VxBadge>
  <VxBadge :value="1000" :max="999">
    <button>notifications</button>
  </VxBadge>
</template>

Types

⁵

⁵

⁵

⁵

⁵

<template>
  <VxBadge :value="5" type="danger">...</VxBadge>
  <VxBadge :value="5" type="primary">...</VxBadge>
  <VxBadge :value="5" type="success">...</VxBadge>
  <VxBadge :value="5" type="warning">...</VxBadge>
  <VxBadge :value="5" type="info">...</VxBadge>
</template>

Custom Color

¹

²

³

<template>
  <VxBadge :value="1" color="#8b5cf6">
    <button>Purple</button>
  </VxBadge>
</template>

Dot

Show a small dot indicator instead of a number.

<template>
  <VxBadge dot>
    <button>messages</button>
  </VxBadge>
  <VxBadge dot type="success">
    <button>status</button>
  </VxBadge>
</template>

Text Value

Use string values for non-numeric badges.

^new

^hot

<template>
  <VxBadge value="new" type="success">
    <button>Features</button>
  </VxBadge>
  <VxBadge value="hot" color="#ef4444">
    <button>Deals</button>
  </VxBadge>
</template>

Offset

Adjust badge position with offset as [top, right] in pixels.

⁸

⁸

<template>
  <VxBadge :value="8" :offset="[5, 5]">
    <button>Adjusted</button>
  </VxBadge>
</template>

Show Zero

By default, a value of 0 hides the badge. Use show-zero to show it.

⁰

<template>
  <VxBadge :value="0">
    <button>Hidden</button>         <!-- badge hidden -->
  </VxBadge>
  <VxBadge :value="0" show-zero>
    <button>Shown</button>          <!-- shows "0" -->
  </VxBadge>
</template>

Hidden

Dynamically hide/show the badge.

¹²

count: 12

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(12)
</script>

<template>
  <VxBadge :value="count" :hidden="count === 0">
    <button>notifications</button>
  </VxBadge>
  <button @click="count++">+</button>
  <button @click="count = Math.max(0, count - 1)">-</button>
</template>

Standalone

Without slot content, the badge renders inline.

⁵

⁴²

<template>
  <VxBadge :value="5" />
  <VxBadge :value="42" type="primary" />
  <VxBadge dot type="success" />
</template>

Props

Prop	Type	Default	Description
value	string | number	—	Badge content (number or text)
max	number	99	Max number before showing max+
dot	boolean	false	Show dot instead of number
hidden	boolean	false	Hide the badge
type	'danger' | 'primary' | 'success' | 'warning' | 'info'	'danger'	Color preset
color	string	''	Custom background color
offset	[number, number]	—	Position offset [top, right] in pixels
showZero	boolean	false	Show badge when value is 0

Slots

Slot	Description
default	Content to wrap (button, icon, avatar, etc.)