React Badge Component

React badge component is small count and labeling component.

Other frameworks

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

How to use React Badge Component.#

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

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>

React 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, react 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 className="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" className="position-relative">
  Profile
  <CBadge color="danger" position="top-start" shape="rounded-pill">
    99+ <span className="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<CButton color="primary" className="position-relative">
  Profile
  <CBadge color="danger" position="top-end" shape="rounded-pill">
    99+ <span className="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<br/>
<CButton color="primary" className="position-relative">
  Profile
  <CBadge color="danger" position="bottom-start" shape="rounded-pill">
    99+ <span className="visually-hidden">unread messages</span>
  </CBadge>
</CButton>
<CButton color="primary" className="position-relative">
  Profile
  <CBadge color="danger" position="bottom-end" shape="rounded-pill">
    99+ <span className="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" className="position-relative">
  Profile
  <CBadge
    className="border border-light p-2"
    color="danger"
    position="top-end"
    shape="rounded-circle"
  >
    <span className="visually-hidden">New alerts</span>
  </CBadge>
</CButton>

Contextual variations#

Add any of the below-mentioned color props to modify the presentation of a react 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 textBgColor="light">light</CBadge>
<CBadge color="dark">dark</CBadge>

You can also apply contextual variations with the textBgColor property, which automatically sets the text color to ensure compliance with the WCAG 4.5:1 contrast ratio standard for enhanced accessibility.

primarysuccessdangerwarninginfolightdark

<CBadge textBgColor="primary">primary</CBadge>
<CBadge textBgColor="success">success</CBadge>
<CBadge textBgColor="danger">danger</CBadge>
<CBadge textBgColor="warning">warning</CBadge>
<CBadge textBgColor="info">info</CBadge>
<CBadge textBgColor="light">light</CBadge>
<CBadge textBgColor="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 textBgColor="light" shape="rounded-pill">light</CBadge>
<CBadge color="dark" shape="rounded-pill">dark</CBadge>

Customizing#

CSS variables#

React 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:                       $white !default;
$badge-padding-y:                   .35em !default;
$badge-padding-x:                   .65em !default;
$badge-border-radius:               var(--cui-border-radius) !default;

$badge-font-size-sm:                .65em !default;
$badge-padding-y-sm:                .3em !default;
$badge-padding-x-sm:                .5em !default;

API#

CBadge#

import { CBadge } from '@coreui/react'
// or
import CBadge from '@coreui/react/src/components/badge/CBadge'

Property	Description	Type	Default
as	Component used for the root node. Either a string to use a HTML element or a component.	`(ElementType & 'symbol')` \| `(ElementType & 'object')` \| `(ElementType & 'span')` \| `(ElementType & 'slot')` \| `(ElementType & 'style')` \| `... 173 more ...` \| `(ElementType & FunctionComponent<...>)`	-
className	A string of all className you want applied to the component.	`string`	-
color	Sets 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`	-
position	Position badge in one of the corners of a link or button.	`'top-start'` \| `'top-end'` \| `'bottom-end'` \| `'bottom-start'`	-
shape	Select 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`	-
size	Size the component small.	`'sm'`	-
textBgColor 5.0.0+	Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string`	-
textColor	Sets the text color of the component to one of CoreUI’s themed colors.	`'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `'primary-emphasis'` \| `'secondary-emphasis'` \| `'success-emphasis'` \| `'danger-emphasis'` \| `'warning-emphasis'` \| `'info-emphasis'` \| `'light-emphasis'` \| `'body'` \| `'body-emphasis'` \| `'body-secondary'` \| `'body-tertiary'` \| `'black'` \| `'black-50'` \| `'white'` \| `'white-50'` \| `string`	-

On this page