Appearance

Badge ​

Badges help to inform users of a notification, item count, or other information relating to a navigation destination.

Two variants: Standard and Dot
Dot does not display a count
Standard displays a count

Badges do not change size. Badges by default will be red500 but can be changed to blue500 for specific use cases.

Basic Usage ​

As default Badge will render at the top-right of the content, red is its default color, but it can be changed to blue

9999
template
<Badge content="1">
  <Icon name="shop-cart" />
</Badge>

<Badge content="1">
  <Button secondary>Button Text</Button>
</Badge>

Playground ​

Anatomy ​

  1. Dot badge container
  2. Dot border
  3. Standard badge container
  4. Standard badge label
  5. Standard badge max container
  6. Standard badge max label

Positioning ​

By default, the Badge will be positioned at the top-right of the content, but this can be changed by setting the position property to inline

1
template
<Badge position="inline" :content="100">
  <Button secondary>Button Text</Button>
</Badge>

Offset ​

Due to the shape of some icons, the default positioning of the Badge might not yield the ideal visual results. For those cases, the offset prop can be set with top and right values to nudge the Badge into place.

no offset

1

offset: { top: 3, right: 3 }

1

offset: { top: 8, right: 6 }

1
template
<div>
  <div class="tw-mb-2">
    <p>no offset set</p>
    <Badge content="1">
      <Icon name="alert-bell" />
    </Badge>
  </div>
  <div class="tw-mb-2">
    <p>offset: { top: 3, right: 3 }</p>
    <Badge content="1" :offset="{ top: 3, right: 3 }">
      <Icon name="alert-bell" />
    </Badge>
  </div>
  <div class="tw-mb-2">
    <p>offset: { top: 8, right: 6 }</p>
    <Badge content="1" :offset="{ top: 8, right: 6, }">
      <Icon name="alert-bell" />
    </Badge>
  </div>
</div>

Color ​

By default, the Badge will render with the color red but it can be changed to blue using the prop color

1
template
<Badge :content="1">
  <Button secondary>Red Badge</Button>
</Badge>
1
template
<Badge :content="1" color="blue">
  <Button secondary>Blue Badge</Button>
</Badge>

Variant ​

As a variant, variant prop can be set as dot or standard

INFO

If variant prop dot is set, the badge will render just a dot without content and it always be positioned top-right

template
<Badge variant="dot" color="blue">
  <Avatar src="https://picsum.photos/600.webp?random=1" />
</Badge>

Badge hidden if content is 0 ​

If your badge content is 0, the badge will not display by default. If you want it to show, then use the show-zero prop.

0
template
<Badge content="0">
  <Button>Without show-zero</Button>
</Badge>

<Badge class="tw-ml-9" content="0" show-zero>
  <Button>With show-zero</Button>
</Badge>

Max value ​

If your badge content is greater than the specified max value, your badge with display the max with a + appended.

INFO

Default max value is 99.

99+100
template
<Badge content="100">
  <Button>Filters</Button>
</Badge>

<Badge content="100" max="150">
  <Button>Filters w/ custom max</Button>
</Badge>

Animation ​

If the animate prop is set to true, the badge will play a short animation when the content changes.

1
1
1
template
<div class="tw-w-100">
  <div class="tw-flex tw-items-center tw-mb-5">
    <Button class="tw-mr-1 " @click="++animateIconBadge">Add to Cart</Button>
    <Badge animate :content="animateIconBadge">
      <Icon name="shop-cart" />
    </Badge>
  </div>
  <Badge animate position="inline" :content="animateInlineBadge">
    <Button @click="++animateInlineBadge">Click to increase</Button>
  </Badge>
  <Badge position="inline" :content="animateInlineBadge">
    <Button @click="++animateInlineBadge">Click to increase (not animated)</Button>
  </Badge>
</div>

API ​

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.