React Badge Component API

Badge API

Explore the API reference for the React Badge component and discover how to effectively utilize its props for customization.

On this page

CBadge

jsx
import { CBadge } from '@coreui/react-pro'
PropertyDefaultType
asspan(ElementType & 'symbol') | (ElementType & 'object') | (ElementType & 'span') | (ElementType & 'slot') | (ElementType & 'style') | ... 175 more ...

Component used for the root node. Either a string to use a HTML element or a component.

className-string

A string of all className you want applied to the component.

colorDeprecated 6.0.0-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'inverse', string

Sets the color context of the component to one of CoreUI’s themed colors.

Use theme instead — color renders the same theme-{color} class and loses to theme when both are set.

position-'top-start', 'top-end', 'bottom-end', 'bottom-start'

Position badge in one of the corners of a link or button.

shape-'rounded', 'rounded-top', 'rounded-end', 'rounded-bottom', 'rounded-start', 'rounded-circle', 'rounded-pill', 'rounded-0', 'rounded-1', 'rounded-2', 'rounded-3', string

Select the shape of the component.

size-'sm', 'lg'

Size the component small or large.

theme6.0.0+-'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'inverse', string

Sets the color context of the component to one of CoreUI’s themed colors.

variant6.0.0+-'outline', 'subtle'

Set the badge variant. The default is solid.