React Bootstrap Badge Component

Badge with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s React Badge component with Bootstrap styles to display counters, labels, and indicators within buttons, links, and UI elements.

On this page

How to use React Bootstrap Badge component

React Bootstrap Badges scale based on their parent using em units, making them easy to embed inside headings, buttons, or navigation items.

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeExample = () => {
  return (
    <>
      <CBadge>New</CBadge>
      <CBadge theme="primary">New</CBadge>
      <CBadge theme="primary" variant="subtle">
        New
      </CBadge>
      <CBadge theme="primary" variant="outline">
        New
      </CBadge>
    </>
  )
}

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeExample = () => {
  return (
    <>
      <CBadge>New</CBadge>
      <CBadge theme="primary">New</CBadge>
      <CBadge theme="primary" variant="subtle">
        New
      </CBadge>
      <CBadge theme="primary" variant="outline">
        New
      </CBadge>
    </>
  )
}

You can also use badges inside buttons and links to display counters or notifications.

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge2Example = () => {
  return (
    <CButton theme="primary">
      Notifications <CBadge theme="danger">4</CBadge>
    </CButton>
  )
}

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge2Example = () => {
  return (
    <CButton theme="primary">
      Notifications <CBadge theme="danger">4</CBadge>
    </CButton>
  )
}

Keep in mind that depending on usage, badges might be challenging for screen reader users. Add visually hidden helper text when needed to improve accessibility.

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge3Example = () => {
  return (
    <CButton theme="primary">
      Profile <CBadge theme="secondary">9</CBadge>
      <span className="visually-hidden">unread messages</span>
    </CButton>
  )
}

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const Badge3Example = () => {
  return (
    <CButton theme="primary">
      Profile <CBadge theme="secondary">9</CBadge>
      <span className="visually-hidden">unread messages</span>
    </CButton>
  )
}

Positioned badges

Use the position prop to place the badge in the corner of a button or link, mimicking the Bootstrap positioning helpers.

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositionedExample = () => {
  return (
    <>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="top-start"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge className="border border-bg" theme="danger" position="top-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <br />
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="bottom-start"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="bottom-end"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
    </>
  )
}

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositionedExample = () => {
  return (
    <>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="top-start"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge className="border border-bg" theme="danger" position="top-end" shape="rounded-pill">
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <br />
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="bottom-start"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
      <CButton theme="primary" className="position-relative">
        Profile
        <CBadge
          className="border border-bg"
          theme="danger"
          position="bottom-end"
          shape="rounded-pill"
        >
          99+ <span className="visually-hidden">unread messages</span>
        </CBadge>
      </CButton>
    </>
  )
}

You can also create generic status indicators without a number by combining badges with utility classes.

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositioned2Example = () => {
  return (
    <CButton theme="primary" className="position-relative">
      Profile
      <CBadge
        className="border border-bg p-3"
        theme="danger"
        position="top-end"
        shape="rounded-circle"
      >
        <span className="visually-hidden">New alerts</span>
      </CBadge>
    </CButton>
  )
}

import React from 'react'
import { CBadge, CButton } from '@coreui/react'

export const BadgePositioned2Example = () => {
  return (
    <CButton theme="primary" className="position-relative">
      Profile
      <CBadge
        className="border border-bg p-3"
        theme="danger"
        position="top-end"
        shape="rounded-circle"
      >
        <span className="visually-hidden">New alerts</span>
      </CBadge>
    </CButton>
  )
}

Contextual variations

Apply color props like primary, danger, or success to control the background color of the badge in a Bootstrap-consistent way.

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextualVariations = () => {
  return (
    <>
      <CBadge theme="primary">primary</CBadge>
      <CBadge theme="secondary">secondary</CBadge>
      <CBadge theme="success">success</CBadge>
      <CBadge theme="danger">danger</CBadge>
      <CBadge theme="warning">warning</CBadge>
      <CBadge theme="info">info</CBadge>
      <CBadge theme="secondary">light</CBadge>
      <CBadge theme="inverse">dark</CBadge>
    </>
  )
}

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgeContextualVariations = () => {
  return (
    <>
      <CBadge theme="primary">primary</CBadge>
      <CBadge theme="secondary">secondary</CBadge>
      <CBadge theme="success">success</CBadge>
      <CBadge theme="danger">danger</CBadge>
      <CBadge theme="warning">warning</CBadge>
      <CBadge theme="info">info</CBadge>
      <CBadge theme="secondary">light</CBadge>
      <CBadge theme="inverse">dark</CBadge>
    </>
  )
}

Pill badges

To make badges more rounded, use the shape="rounded-pill" prop. This mirrors Bootstrap’s pill-style badge appearance.

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgePillExample = () => {
  return (
    <>
      <CBadge theme="primary" shape="rounded-pill">
        primary
      </CBadge>
      <CBadge theme="secondary" shape="rounded-pill">
        secondary
      </CBadge>
      <CBadge theme="success" shape="rounded-pill">
        success
      </CBadge>
      <CBadge theme="danger" shape="rounded-pill">
        danger
      </CBadge>
      <CBadge theme="warning" shape="rounded-pill">
        warning
      </CBadge>
      <CBadge theme="info" shape="rounded-pill">
        info
      </CBadge>
      <CBadge theme="secondary" shape="rounded-pill">
        light
      </CBadge>
      <CBadge theme="inverse" shape="rounded-pill">
        dark
      </CBadge>
    </>
  )
}

import React from 'react'
import { CBadge } from '@coreui/react'

export const BadgePillExample = () => {
  return (
    <>
      <CBadge theme="primary" shape="rounded-pill">
        primary
      </CBadge>
      <CBadge theme="secondary" shape="rounded-pill">
        secondary
      </CBadge>
      <CBadge theme="success" shape="rounded-pill">
        success
      </CBadge>
      <CBadge theme="danger" shape="rounded-pill">
        danger
      </CBadge>
      <CBadge theme="warning" shape="rounded-pill">
        warning
      </CBadge>
      <CBadge theme="info" shape="rounded-pill">
        info
      </CBadge>
      <CBadge theme="secondary" shape="rounded-pill">
        light
      </CBadge>
      <CBadge theme="inverse" shape="rounded-pill">
        dark
      </CBadge>
    </>
  )
}

API reference

See below for the full API reference for all available props for the Bootstrap-styled React Badge component.

<CBadge />