import { CBadge } from '@coreui/react'// orimport CBadge from '@coreui/react/src/components/badge/CBadge'| Property | Description | Type | Default |
|---|---|---|---|
| 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 | - |
| component | Component used for the root node. Either a string to use a HTML element or a component. | string | ComponentClass<any, any> | FunctionComponent<any> | - |
| 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' | - |
| textColor | Sets 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 | - |
On this page