Nuxt Badge

Documentation and examples for Nuxt badges, our small count and labelling 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
  }
}

Examples

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>

Contextual variations

Default Primary Info Success Danger Warning

<badge type="default">Default</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>

Props

PROP NAME	TYPE	DEFAULT	DESCRIPTION
tag	String	span	Html tag to use for the badge.
type	String	default	Badge type (primary, info, danger, default, warning, success)
size	String	N/A	Badge size (md, lg)

Slots

SLOT	DESCRIPTION
default	Default content for the badge