Badge

A Badge is a small styled box used to display how many items are contained in a section.

Number

Use the number prop to display a number in the badge. Since Badges are fixed in size, they will automatically display 99+ for any num greater than 99.

<template>
  <DemoGrid>
      <ci-badge :number="0" />
      <ci-badge :number="10" />
      <ci-badge :number="100" />
  </DemoGrid>
</template>

Variant

Use the variant prop to change appearance of the badge.

<template>
  <DemoGrid>
      <ci-badge :number="0" />
      <ci-badge :variant="'buyer-signal'" :number="5" />
      <ci-badge :variant="'buyer-signal'" :number="200" />
      <ci-badge :variant="'notification'" :number="5" />
      <ci-badge :variant="'notification'" :number="200" />
  </DemoGrid>
</template>