Labels     

<!-- Basic Labels -->
<span class="label bg-primary text-white">label</span>
<span class="label bg-secondary text-white shadow-1">10k</span>
<!-- Floating Labels -->
<button class="light relative-position">
  Inbox
  <span class="floating label circular bg-primary text-white">22</span>
</button>
<button class="red relative-position">
  Inbox
  <span class="floating label bg-dark">22</span>
</button>
<!-- Chip Labels -->
<span class="chip label bg-grey-4">
  John
</span>
<!-- Chip Label with image/avatar -->
<span class="chip label bg-grey-4">
  <img :src="'statics/boy-avatar.png'">
  John
</span>
<!-- Chip Label with close button -->
<span class="chip label bg-light">
  John
  <i class="on-right">close</i>
</span>
<!-- Tag Labels -->
<span class="tag label tag bg-light">New <i class="on-right">mail</i></span>
<span class="tag label bg-red text-white">Upcoming</span>
<span class="tag label bg-primary text-white">Featured</span>
<!-- Pointing Labels -->
<span class="label pointing-up bg-primary text-white">up</span>
<span class="label pointing-down bg-primary text-white">down</span>
<span class="label pointing-right bg-primary text-white">right</span>
<span class="label pointing-left bg-primary text-white">left</span>
<!-- With Icons -->
<span class="label bg-primary text-white">
  <i class="on-left">mail</i>
  10
</span>
<span class="label bg-tertiary text-white">
  10
  <i class="on-right">mail</i>
</span>
<!-- With Text or Icon Detail -->
<span class="label bg-amber">
  <span class="left-detail">Left</span> Detail
</span>
<span class="label bg-secondary text-white">
  Right <span class="right-detail">Detail</span>
</span>
<span class="label bg-orange text-white">
  <i class="left-detail">mail</i> 10
</span>
<span class="label bg-orange text-white">
  10 <i class="right-detail">mail</i>
</span>
<!-- Circular/Oval Labels -->
<span class="circular label bg-primary text-white">2</span>
<span class="circular label bg-secondary text-white shadow-1">10</span>