Badge

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.name, Badge)

For local usage

export default {
  components: {
    [Badge.name]: Badge
  }
}

Badge inside button

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

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

<script>
  export default {}
</script>

Contextual variations

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

PrimaryInfoSuccessDangerWarningDefault
<template>
  <div>
    <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>
  </div>
</template>

<script>
  export default {}
</script>

Slots

NameDescription
defaultDefault content for the badge

← Cards →