Badge

Component source on Github This page on Github

Reference

base"badge"
String
Base name used to style component
mod-badgeempty string
String
Style of the main badge element
nameempty string
String
Name of the component
positionempty string
String
Position of the badge. Valid values are: 'top-right', 'top-left', 'bottom-right', 'bottom-left'. If position is set to any of those values badge is positioned as absolute in the corner of the parent element (the parent element must be positioned as relative). If you need finer control over position see the example of positioned badge below.
update-animationempty string
String
Animation to play when updating content of the badge. Valid values are: 'scale-up', 'bounce', 'to-danger' and 'to-success'
update-keyundefined
StringNumber
Update this prop value to play badges animation.
variantempty string
String
Active variant of the element mod-* props
Slots
default
Slot for the badges content

Example

NEW 7 NEWNEWNEW
    <template>
  <div class="flex items-center gap-x-5">
    <v-badge mod-badge="variant:secondary">
      NEW
      <v-badge
        mod-badge="size:tiny variant:success"
        class="ml-2"
      >
        7
      </v-badge>
    </v-badge>
    <v-badge>NEW</v-badge>
    <v-badge mod-badge="size:small variant:warn">NEW</v-badge>
    <v-badge mod-badge="size:tiny variant:success">NEW</v-badge>
  </div>
</template>

Example - positioned badge

Badges can be placed above other elements with the use of few Tailwind classes. For example absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 classes will put badge in the top right corner of the containg element. Position prop can be also be used which is just shortcut to add these classes to badge automatically. However, if you need more control over placement use classes directly.

    <template>
  <v-button class="relative">
    Badge button
    <v-badge
      position="top-right"
      mod-badge="special:circle variant:danger"
    ></v-badge>
  </v-button>
</template>

Example - animated badge

To animate badge once on value update use update-key prop. For persistent animation you can use one of the Tailwind animate classes.

4444 NEW NEW 
    <template>
  <div class="flex gap-x-7">
    <v-badge
      mod-badge="size:small variant:secondary"
      update-animation="scale-up"
      :update-key="example"
    >
      {{ example }}
    </v-badge>

    <v-badge
      mod-badge="size:small variant:secondary"
      update-animation="bounce"
      :update-key="example"
    >
      {{ example }}
    </v-badge>

    <v-badge
      mod-badge="size:small variant:secondary"
      update-animation="to-danger"
      :update-key="example"
    >
      {{ example }}
    </v-badge>

    <v-badge
      mod-badge="size:small variant:secondary"
      update-animation="to-success"
      :update-key="example"
    >
      {{ example }}
    </v-badge>

    <!-- Tailwind animations -->

    <v-badge
      mod-badge="size:small variant:warn"
      class="animate-pulse"
    >
      NEW
    </v-badge>

    <v-badge
      mod-badge="size:small variant:success"
      class="animate-bounce"
    >
      NEW
    </v-badge>
  </div>

  <div class="mt-10">
    <v-button @click="example = ((Math.random() * 50) + 10).toFixed()">
      Update badge value
    </v-button>
  </div>
</template>
  

    
  

  
    <script setup>
import { ref } from "vue";

let example = ref(4);
</script>