Skip to main content

​
Badge

The VBadge component superscripts or subscripts an avatar-like icon or text onto content to highlight information to a user or to draw attention to a specific element.

​
Usage

<template>
  <v-badge content="5" color="error">
    <v-icon icon="mdi-bell" />
  </v-badge>
</template>

​
Props

​
content
string | number
Content to display in the badge (typically a number or short text)
​
color
string
Applies specified color to the badge
​
textColor
string
Applies specified color to the badge text
​
bordered
boolean
default:"false"
Applies a border around the badge
​
dot
boolean
default:"false"
Displays the badge as a small dot instead of text content
​
dotSize
string | number
Size of the badge when using dot mode
​
floating
boolean
default:"false"
Makes the badge float over the content
​
icon
IconValue
Icon to display in the badge
​
inline
boolean
default:"false"
Displays the badge inline with the content
​
label
string
default:"$vuetify.badge"
Accessibility label for the badge
​
max
string | number
Maximum number to display. Shows max+ when content exceeds this value
​
modelValue
boolean
default:"true"
Controls the visibility of the badge
​
offsetX
string | number
Horizontal offset of the badge position
​
offsetY
string | number
Vertical offset of the badge position
​
location
string
default:"top end"
Position of the badge. Options: combinations of top, bottom, start, end, center
​
rounded
string | number | boolean
Border radius of the badge
​
tag
string
default:"div"
Specify a custom HTML tag to use on the root element
​
transition
string
default:"scale-rotate-transition"
Transition to use when showing/hiding the badge

​
Slots

​
default
The default slot for the element the badge is attached to
​
badge
Slot for custom badge content

​
Examples

​
Notification Badge

<template>
  <v-badge content="12" color="error">
    <v-btn icon="mdi-email" />
  </v-badge>
</template>

​
Dot Badge

<template>
  <v-badge dot color="success">
    <v-avatar image="/user.jpg" />
  </v-badge>
</template>

​
Max Value

<template>
  <v-badge content="150" max="99" color="primary">
    <v-icon icon="mdi-message" />
  </v-badge>
</template>

​
Custom Position

<template>
  <v-badge 
    content="New"
    color="info"
    location="bottom start"
    offset-x="10"
    offset-y="10"
  >
    <v-card width="200" height="100">
      <v-card-text>Content with badge</v-card-text>
    </v-card>
  </v-badge>
</template>

​
Icon Badge

<template>
  <v-badge icon="mdi-check" color="success">
    <v-avatar color="grey" icon="mdi-account" />
  </v-badge>
</template>

​
Dynamic Visibility

<template>
  <div>
    <v-badge 
      :content="notifications"
      :model-value="notifications > 0"
      color="error"
    >
      <v-btn icon="mdi-bell" @click="clearNotifications" />
    </v-badge>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const notifications = ref(5)

function clearNotifications() {
  notifications.value = 0
}
</script>

Build docs developers (and LLMs) love

Get started for freeTalk to us