BootstrapVue Badge
Documentation and examples for BootstrapVue badges, our small count and labelling component.
Examples
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>
<b-button variant="primary">
<span>Notifications</span>
<b-badge variant="danger" class="badge-circle badge-md badge-floating border-white">4</b-badge>
</b-button>
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>
Links
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>
Sizes
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>
Props
PROP NAME | TYPE | DEFAULT | DESCRIPTION |
---|---|---|---|
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
SLOT | DESCRIPTION |
---|---|
default | Default content for the badge |
If you want to see more examples and properties please check the official BootstrapVue Documentation.