Badge

Documentation and examples for badges, our small count and labeling component.

To use the custom badges, import the Badge component 
import {Badge} from '@/components'

Global usage

Vue.component(Badge.name, Badge)

For local usage

export default {
  components: {
    Badge
  }
}

Badge inside button

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

<base-button type="primary">
  Notifications &nbsp;<badge type="default">4</badge>
</base-button>
Show Code

Contextual variations

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

Primary Info Success Danger Warning Default
<badge type="primary">Primary</badge>
<badge type="info">Info</badge>
<badge type="success">Success</badge>
<badge type="danger">Danger</badge>
<badge type="warning">Warning</badge>
<badge type="default">Default</badge>
Show Code

Badge props

Badge Slots

Slot Description
default Default content for the badge

← Breadcrumb →