Vue Badge

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

Example

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

Copy
<base-button type="default">
  Unread messages
  <badge type="primary" class="ml-2">24</badge>
</base-button>

<base-button type="primary">
  <span>Notifications</span>
  <badge type="danger" rounded class="badge-floating badge-md border-white badge-circle">4</badge>
</base-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
Copy
<badge type="default" class="mr-2">Default</badge>
<badge type="primary" class="mr-2">Primary</badge>
<badge type="secondary" class="mr-2">Secondary</badge>
<badge type="info" class="mr-2">Info</badge>
<badge type="success" class="mr-2">Success</badge>
<badge type="danger" class="mr-2">Danger</badge>
<badge type="warning" class="mr-2">Warning</badge>

Pill badges

Use the rounded modifier prop 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
Copy
<badge type="default" rounded class="mr-2">Default</badge>
<badge type="primary" rounded class="mr-2">Primary</badge>
<badge type="secondary" rounded class="mr-2">Secondary</badge>
<badge type="info" rounded class="mr-2">Info</badge>
<badge type="success" rounded class="mr-2">Success</badge>
<badge type="danger" rounded class="mr-2">Danger</badge>
<badge type="warning" rounded class="mr-2">Warning</badge>

If you want to render the Badge component as an anchor element, you need to set a tag and add a href attribute on them.

Default Primary Secondary Info Success Danger Warning
Copy
  
  <badge type="default" tag="a" href="javascript:void(0)"  class="mr-2">Default</badge>
  <badge type="primary" tag="a" href="javascript:void(0)"  class="mr-2">Primary</badge>
  <badge type="secondary" tag="a" href="javascript:void(0)"  class="mr-2">Secondary</badge>
  <badge type="info" tag="a" href="javascript:void(0)"  class="mr-2">Info</badge>
  <badge type="success" tag="a" href="javascript:void(0)"  class="mr-2">Success</badge>
  <badge type="danger" tag="a" href="javascript:void(0)"  class="mr-2">Danger</badge>
  <badge type="warning" tag="a" href="javascript:void(0)"  class="mr-2">Warning</badge>

Sizes

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

Default Medium Large badge
Copy
<badge type="primary" rounded class="ml-2">Default</badge>
<badge type="warning" rounded class="ml-2 badge-md">Medium</badge>
<badge type="success" rounded class="ml-2 badge-lg">Large badge</badge>