Badge

Demo

Badge Cross-platform Example and Preview

Text anchors

Messages 3Notifications

Counts

Inbox3

Tasks12

Mentions99+

Drafts0

Status dots

Online Syncing Offline

Variants

NewStableReview

Basic Usage

<script setup lang="ts">
import { VBadge } from '@varo-ui/h5'
</script>

<template>
  <VBadge :content="3" />
  <VBadge tone="primary">
    New
  </VBadge>
</template>

Text Top-right Badge

<template>
  <span class="badge-anchor">
    <span class="badge-anchor__label">
      Messages
      <VBadge class="badge-anchor__mark" :content="3" aria-label="3 unread messages" />
    </span>
  </span>
  <span class="badge-anchor">
    <span class="badge-anchor__label">
      Notifications
      <VBadge class="badge-anchor__mark" aria-label="New notification" dot />
    </span>
  </span>
</template>

<style scoped>
.badge-anchor {
  display: inline-flex;
  min-width: 72px;
  padding: 10px 14px;
  justify-content: center;
}

.badge-anchor + .badge-anchor {
  margin-left: 12px;
}

.badge-anchor__label {
  position: relative;
}

.badge-anchor__mark {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(70%, -55%);
}
</style>

Count And Cap

<template>
  <VBadge :content="12" />
  <VBadge :content="120" :max="99" tone="warning" />
</template>

Zero And Status Dot

<template>
  <VBadge :content="0" show-zero tone="default" />
  <VBadge aria-label="Online" dot tone="success" />
</template>

Variants And Semantic Tones

<template>
  <VBadge tone="primary">
    New
  </VBadge>
  <VBadge tone="success" variant="soft">
    Stable
  </VBadge>
  <VBadge tone="warning" variant="outline">
    Review
  </VBadge>
</template>

Props

Prop	Type	Default	Description
content	number | string	undefined	Badge content
dot	boolean	false	Render only a status dot
max	number	99	Numeric content cap
showZero	boolean	false	Render numeric 0
tone	'default' | 'primary' | 'success' | 'warning' | 'danger'	'danger'	Semantic tone
variant	'solid' | 'soft' | 'outline'	'solid'	Visual variant

Slots

Slot	Description
default	Custom badge content

Data Attributes

Attribute	Description
data-dot	Dot state
data-tone	Current semantic tone
data-variant	Current visual variant