Badge

React badges are small count and labeling components.

Usage

Example

Primary color badge success color badge warning color badge danger color badge secondary color badgeRaw badgePill badgeLink Badge

Script


  return (
    <>
      <CBadge color="primary"> Primary color badge</CBadge>
      <CBadge color="success"> success color badge</CBadge>
      <CBadge color="warning"> warning color badge</CBadge>
      <CBadge color="danger"> danger color badge</CBadge>
      <CBadge color="secondary"> secondary color badge</CBadge>
      <CBadge>Raw badge</CBadge>
      <CBadge color="primary" shape="pill">Pill badge</CBadge>
      <CBadge color="info" href="https://coreui.io/">
        Link Badge
      </CBadge>
    </>
  )

# Features

Styling determined by color property
Optional pill shape
If 'to' or 'href' prop is passed Badge gain behavior of link (is rendered as badge CLink) and gains all props and options of CLink component

# Badge API

Name	Type	Default Value
tag	any	span
main HTML tag name
className	string
user classes for the main HTML tag
innerRef	(object \| Function \| string)
ref to the main tag
color	string
defines background color of the badge
shape	(pill)
set to 'pill' for pill style badge