# 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'
1

Global usage

Vue.component(Badge.name, Badge)
1

For local usage

export default {
  components: {
    [Badge.name]: Badge
  }
}
1
2
3
4
5

# Badge inside button

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

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

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9

# Contextual variations

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

Primary Info Success Danger Warning Default
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

By providing a href prop you can quickly get actionable link badges with hover and focus states.

<template>
  <div>
    <badge href="#" type="primary">Primary</badge>
    <badge href="#" type="info">Info</badge>
    <badge href="#" type="success">Success</badge>
    <badge href="#" type="danger">Danger</badge>
    <badge href="#" type="warning">Warning</badge>
    <badge href="#" type="default">Default</badge>
  </div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Slots

Name Description
default Default content for the badge

← Breadcrumb →