Logo
Hi, Sean S

Tabs 

<v-toolbar>
  <v-tabs
    dark
    background-color="primary"
    grow
  >
    <v-tab>
      <v-badge
        color="pink"
        dot
      >
        Item One
      </v-badge>
    </v-tab>

    <v-tab>
      <v-badge
        color="green"
        content="6"
      >
        Item Two
      </v-badge>
    </v-tab>

    <v-tab>
      <v-badge
        color="deep-purple accent-4"
        icon="mdi-vuetify"
      >
        Item Three
      </v-badge>
    </v-tab>
  </v-tabs>
</v-toolbar>

Badges help convey information to the user in a variety of ways.

Dynamic notifications 

<v-container>
  <v-row justify="space-around">
    <div>
      <v-btn
        class="mx-1"
        color="primary"
        @click="messages++"
      >
        Send Message
      </v-btn>

      <v-btn
        class="mx-1"
        color="error"
        @click="messages = 0"
      >
        Clear Notifications
      </v-btn>
    </div>

    <v-badge
      :content="messages"
      :value="messages"
      color="green"
      overlap
    >
      <v-icon large>mdi-email</v-icon>
    </v-badge>
  </v-row>
</v-container>

You can incorporate badges with dynamic content to make things such as a notification system.

Show-on-hover 

<div class="text-center">
  <v-badge
    :value="hover"
    color="deep-purple accent-4"
    content="9999+"
    left
    transition="slide-x-transition"
  >
    <v-hover v-model="hover">
      <v-icon
        color="grey lighten-1"
        large
      >
        mdi-account-circle
      </v-icon>
    </v-hover>
  </v-badge>
</div>

You can do many things with visibility control, for example, show badge on hover.

Customization options 

<v-container>
  <v-row
    align="center"
    justify="center"
  >
    <v-badge
      bordered
      color="error"
      icon="mdi-lock"
      overlap
    >
      <v-btn
        class="white--text"
        color="error"
        depressed
      >
        Lock Account
      </v-btn>
    </v-badge>

    <div class="mx-3"></div>

    <v-badge
      bordered
      bottom
      color="deep-purple accent-4"
      dot
      offset-x="10"
      offset-y="10"
    >
      <v-avatar size="40">
        <v-img src="/media/users/300_2.jpg"></v-img>
      </v-avatar>
    </v-badge>

    <div class="mx-3"></div>

    <v-badge
      avatar
      bordered
      overlap
    >
      <template v-slot:badge>
        <v-avatar>
          <v-img src="/media/project-logos/7.png"></v-img>
        </v-avatar>
      </template>

      <v-avatar size="40">
        <v-img src="/media/users/100_3.jpg"></v-img>
      </v-avatar>
    </v-badge>
  </v-row>
</v-container>

The v-badge component is flexible and can be used in a variety of use-cases over numerous elements. Options to tweak the location are also available through the offset-x and offset-y props.