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

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

Global usage

Vue.component(, 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.

  <p-button type="info">
    Notifications <badge type="primary">4</badge>

  export default {}

Contextual variations

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

    <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>

  export default {}


defaultDefault content for the badge