# React Badge Component
> React badge component is small count and labeling component.
## Examples
React badge component scales to suit the size of the parent element by using relative font sizing and `em` units.
Badges come in three variants: solid (default), `variant="subtle"` and `variant="outline"`. A badge without a `color` stays neutral.
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeExample = () => {
return (
<>
New
New
New
New
)
}
```
### Headings
Badges adapt to the `font-size` of the parent element, down to a floor that keeps them legible.
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeHeadingsExample = () => {
return (
<>
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
)
}
```
### Buttons
React badges can be used as part of links or buttons to provide a counter.
```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'
export const Badge2Example = () => {
return (
Notifications 4
)
}
```
Remark that depending on how you use them, React badges may be complicated for users of screen readers and related assistive technologies. The styling gives sighted users a visual cue about the badge's purpose, but a screen reader announces only its content — so a badge can read as a stray word or number at the end of a sentence, link, or button.
Unless the context is clear — as in the Notifications example above, where the `4` is plainly a count — consider including additional context with a visually hidden piece of additional text.
```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'
export const Badge3Example = () => {
return (
Profile 9
unread messages
)
}
```
### Positioned
Use `position` prop to modify a component and position it in the corner of a link or button.
```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'
export const BadgePositionedExample = () => {
return (
<>
Profile
99+ unread messages
Profile
99+ unread messages
Profile
99+ unread messages
Profile
99+ unread messages
)
}
```
You can also create more generic indicators without a counter using a few more utilities.
```html
import React from 'react'
import { CBadge, CButton } from '@coreui/react'
export const BadgePositioned2Example = () => {
return (
Profile
New alerts
)
}
```
### Sizes
Use the `size` prop to change the padding and the minimum height.
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeSizesExample = () => {
return (
<>
Small
Default
Large
)
}
```
## Variants
Use the `color` prop to apply a semantic theme color to badges. Combine it with `variant` for the subtle and outline treatments.
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeContextualVariations = () => {
return (
<>
primary
secondary
success
danger
warning
info
light
dark
)
}
```
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeSubtleVariations = () => {
return (
<>
primary
secondary
success
danger
warning
info
light
dark
)
}
```
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgeOutlineVariations = () => {
return (
<>
primary
secondary
success
danger
warning
info
light
dark
)
}
```
> ##### Conveying meaning to assistive technologies
>
> Relying on color to convey meaning creates a visual cue that assistive technologies, like screen readers, cannot perceive. It's essential that any information represented by color is either apparent from the content itself (e.g., the visible text) or supplemented by alternative methods, such as extra text using the `.visually-hidden` class.
## Pill badges
Apply the `shape="rounded-pill"` prop to make badges rounded.
```html
import React from 'react'
import { CBadge } from '@coreui/react'
export const BadgePillExample = () => {
return (
<>
primary
secondary
success
danger
warning
info
light
dark
)
}
```
## API
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.
- [<CBadge />](./api/#cbadge)