React Badge Component

React badge component is small count and labeling component.

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
1<h1>Example heading <CBadge color="secondary">New</CBadge></h1>
2<h2>Example heading <CBadge color="secondary">New</CBadge></h2>
3<h3>Example heading <CBadge color="secondary">New</CBadge></h3>
4<h4>Example heading <CBadge color="secondary">New</CBadge></h4>
5<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
6<h6>Example heading <CBadge color="secondary">New</CBadge></h6>

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

1<CButton color="primary">
2 Notifications <CBadge color="secondary">4</CBadge>
3</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.

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

Positioned#

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


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

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

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

Contextual variations#

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

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

Pill badges#

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

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

API#

CBadge#

1import { CBadge } from '@coreui/react'
2// or
3import CBadge from '@coreui/react/src/components/badge/CBadge'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
colorSets the color context of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'primary-gradient' | 'secondary-gradient' | 'success-gradient' | 'danger-gradient' | 'warning-gradient' | 'info-gradient' | 'dark-gradient' | 'light-gradient' | string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-
positionPosition badge in one of the corners of a link or button.'top-start' | 'top-end' | 'bottom-end' | 'bottom-start'-
shapeSelect the shape of the component.'rounded' | 'rounded-top' | 'rounded-end' | 'rounded-bottom' | 'rounded-start' | 'rounded-circle' | 'rounded-pill' | 'rounded-0' | 'rounded-1' | 'rounded-2' | 'rounded-3' | string-
sizeSize the component small.'sm'-
textColorSets the text color of the component to one of CoreUI’s themed colors.'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string-