BootstrapVue Badges

Documentation and examples for BootstrapVue badges, our small count and labelling component.


Badges can be used as part of links or buttons to provide a counter.

<b-button variant="default">
 <span>Unread messages</span>
 <b-badge variant="primary">24</b-badge>
<b-button variant="primary">
 <b-badge variant="danger" class="badge-circle badge-md badge-floating border-white">4</b-badge>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Primary Secondary Info Success Danger Warning

  <b-badge variant="default">Default</b-badge>
  <b-badge variant="primary">Primary</b-badge>
  <b-badge variant="secondary">Secondary</b-badge>
  <b-badge variant="info">Info</b-badge>
  <b-badge variant="success">Success</b-badge>
  <b-badge variant="danger">Danger</b-badge>
  <b-badge variant="warning">Warning</b-badge>

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Default Primary Secondary Info Success Danger Warning

  <b-badge pill variant="default">Default</b-badge>
  <b-badge pill variant="primary">Primary</b-badge>
  <b-badge pill variant="secondary">Secondary</b-badge>
  <b-badge pill variant="info">Info</b-badge>
  <b-badge pill variant="success">Success</b-badge>
  <b-badge pill variant="danger">Danger</b-badge>
  <b-badge pill variant="warning">Warning</b-badge>

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Default Primary Secondary Info Success Danger Warning

    <b-badge href="javascript:;" variant="default">Default</b-badge>
    <b-badge href="javascript:;" variant="primary">Primary</b-badge>
    <b-badge href="javascript:;" variant="secondary">Secondary</b-badge>
    <b-badge href="javascript:;" variant="info">Info</b-badge>
    <b-badge href="javascript:;" variant="success">Success</b-badge>
    <b-badge href="javascript:;" variant="danger">Danger</b-badge>
    <b-badge href="javascript:;" variant="warning">Warning</b-badge>


Use the .badge-md or .badge-lg modifier classes to adjust badge sizes.

Default Medium Large badge

  <b-badge variant="primary">Default</b-badge>
  <b-badge variant="warning" class="badge-md">Medium</b-badge>
  <b-badge variant="success" class="badge-lg">Large badge</b-badge>


tag String span Html tag to use for the badge.
rounded Boolean N/A Whether badge is of pill type
circle Boolean N/A Whether badge is circle
icon String N/A Icon name. Will be overwritten by slot if slot is used
type String default Badge type (primary, info, danger, default, warning, success)
size String N/A Badge size (md, lg)

Badge Slots

default Default content for the badge

If you want to see more examples and properties please check the official BootstrapVue Documentation.