CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

Vue Badge Component

Vue badge component is small count and labeling component.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Badge
  • Bootstrap Badge
  • React Badge

Example #

Badge component scales to suit the size of the parent element by using relative font sizing and em units.

Basic usage #

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
1
2
3
4
5
6

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

<CButton color="primary">
  Notifications <CBadge color="secondary">4</CBadge>
</CButton>
1
2
3

Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies.

Unless the context is clear, consider including additional context with a visually hidden piece of additional text.

<CButton color="primary">
  Profile <CBadge color="secondary">9</CBadge>
  <span class="visually-hidden">unread messages</span>
</CButton>
1
2
3
4

Positioned #

Use position prop to modify a component and position it in the corner of a link or button.


<CButton color="primary" class="position-relative">
  Profile
  <CBadge color="danger" position="top-start" shape="rounded-pill">
    99+ <span class="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<CButton color="primary" class="position-relative">
  Profile
  <CBadge color="danger" position="top-end" shape="rounded-pill">
    99+ <span class="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<CButton color="primary" class="position-relative">
  Profile
  <CBadge color="danger" position="bottom-start" shape="rounded-pill">
    99+ <span class="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<CButton color="primary" class="position-relative">
  Profile
  <CBadge color="danger" position="bottom-end" shape="rounded-pill">
    99+ <span class="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

You can also create more generic indicators without a counter using a few more utilities.

<CButton color="primary" class="position-relative">
  Profile
  <CBadge class="border border-light p-2" color="danger" position="top-end" shape="rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </CBadge>
</CButton>
1
2
3
4
5
6

Contextual variations #

Add any of the below-mentioned color props to modify the presentation of a badge.

primarysuccessdangerwarninginfolightdark
<CBadge color="primary">primary</CBadge>
<CBadge color="success">success</CBadge>
<CBadge color="danger">danger</CBadge>
<CBadge color="warning">warning</CBadge>
<CBadge color="info">info</CBadge>
<CBadge color="light">light</CBadge>
<CBadge color="dark">dark</CBadge>
1
2
3
4
5
6
7

Pill badges #

Apply the shape="rounded-pill" prop to make badges rounded.

primarysuccessdangerwarninginfolightdark
<CBadge color="primary" shape="rounded-pill">primary</CBadge>
<CBadge color="success" shape="rounded-pill">success</CBadge>
<CBadge color="danger" shape="rounded-pill">danger</CBadge>
<CBadge color="warning" shape="rounded-pill">warning</CBadge>
<CBadge color="info" shape="rounded-pill">info</CBadge>
<CBadge color="light" shape="rounded-pill">light</CBadge>
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
1
2
3
4
5
6
7

Customizing #

CSS variables #

Vue badges use local CSS variables on .badges for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-badge-padding-x: #{$badge-padding-x};
--cui-badge-padding-y: #{$badge-padding-y};
--cui-badge-font-size: #{$badge-font-size};
--cui-badge-font-weight: #{$badge-font-weight};
--cui-badge-color: #{$badge-color};
--cui-badge-border-radius: #{$badge-border-radius};
1
2
3
4
5
6

How to use CSS variables #

const vars = { 
  '--my-css-var': 10,
  '--my-another-css-var': "red" 
}
return <CBadge :style="vars">...</CBadge>
1
2
3
4
5

SASS variables #

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $high-emphasis-inverse;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;

$badge-font-size-sm:                .65em;
$badge-padding-y-sm:                .3em;
$badge-padding-x-sm:                .5em;
1
2
3
4
5
6
7
8
9
10

API #

CBadge #

import { CBadge } from '@coreui/vue'
// or
import CBadge from '@coreui/vue/src/components/badge/CBadge'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
colorSets the color context of the component to one of CoreUI’s themed colors.string'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
componentComponent used for the root node. Either a string to use a HTML element or a component.string-'span'
positionPosition badge in one of the corners of a link or button.string'top-start', 'top-end', 'bottom-end', 'bottom-start'-
shapeSelect the shape of the component.string'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3'
sizeSize the component small.string'sm'-
text-colorSets the text color of the component to one of CoreUI’s themed colors.string'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
On this page
  • Example
    • Basic usage
    • Positioned
  • Contextual variations
  • Pill badges
  • Customizing
    • CSS variables
    • SASS variables
  • API
    • CBadge
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.