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>

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.