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