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.
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>
Badges can be used as part of links or buttons to provide a counter.
<CButton color="primary">
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
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>
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>
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>
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>
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>
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};
@include rfs($badge-font-size, --cui-badge-font-size);
--cui-badge-font-weight: #{$badge-font-weight};
--cui-badge-color: #{$badge-color};
--cui-badge-border-radius: #{$badge-border-radius};How to use CSS variables
const vars = {
'--my-css-var': 10,
'--my-another-css-var': "red"
}
return <CBadge :style="vars">...</CBadge>
SASS variables
$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default;
$badge-color: $high-emphasis-inverse !default;
$badge-padding-y: .35em !default;
$badge-padding-x: .65em !default;
$badge-border-radius: $border-radius !default;
// scss-docs-end badge-variables
$badge-font-size-sm: .65em !default;
$badge-padding-y-sm: .3em !default;
$badge-padding-x-sm: .5em !default;API
CBadge
import { CBadge } from '@coreui/vue'
// or
import CBadge from '@coreui/vue/src/components/badge/CBadge'
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| color | Sets the color context of the component to one of CoreUI’s themed colors. | string | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light' | - |
| component | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' |
| position | Position badge in one of the corners of a link or button. | string | 'top-start', 'top-end', 'bottom-end', 'bottom-start' | - |
| shape | Select 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' | - |
| size | Size the component small. | string | 'sm' | - |
| text-color | Sets 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' | - |