Small count and labeling component.
import Badge from 'react-bootstrap/Badge'
{/* Primary badge */}
<Badge bg='primary'>Primary</Badge>
{/* Accent badge */}
<Badge bg='accent'>Accent</Badge>
{/* Secondary badge */}
<Badge bg='secondary'>Secondary</Badge>
{/* Success badge */}
<Badge bg='success'>Success</Badge>
{/* Danger badge */}
<Badge bg='danger'>Danger</Badge>
{/* Warning badge */}
<Badge bg='warning'>Warning</Badge>
{/* Info badge */}
<Badge bg='info'>Info</Badge>
{/* Light badge */}
<Badge bg='light'>Light</Badge>
{/* Dark badge */}
<Badge bg='dark'>Dark</Badge>
import Badge from 'react-bootstrap/Badge'
{/* Primary badge */}
<Badge bg='faded-primary'>Primary</Badge>
{/* Accent badge */}
<Badge bg='faded-accent'>Accent</Badge>
{/* Success badge */}
<Badge bg='faded-success'>Success</Badge>
{/* Danger badge */}
<Badge bg='faded-danger'>Danger</Badge>
{/* Warning badge */}
<Badge bg='faded-warning'>Warning</Badge>
{/* Info badge */}
<Badge bg='faded-info'>Info</Badge>
{/* Light badge */}
<Badge bg='faded-light'>Light</Badge>
{/* Dark badge */}
<Badge bg='faded-dark'>Dark</Badge>
import Badge from 'react-bootstrap/Badge'
{/* Primary pill badge */}
<Badge pill bg='primary'>Primary</Badge>
{/* Accent pill badge */}
<Badge pill bg='accent'>Accent</Badge>
{/* Secondary pill badge */}
<Badge pill bg='secondary'>Accent</Badge>
{/* Success pill badge */}
<Badge pill bg='success'>Success</Badge>
{/* Danger pill badge */}
<Badge pill bg='danger'>Danger</Badge>
{/* Warning pill badge */}
<Badge pill bg='warning'>Warning</Badge>
{/* Info pill badge */}
<Badge pill bg='info'>Info</Badge>
{/* Light pill badge */}
<Badge pill bg='light'>Light</Badge>
{/* Dark pill badge */}
<Badge pill bg='dark'>Dark</Badge>
import Badge from 'react-bootstrap/Badge'
<h1>Example heading <Badge bg='secondary'>New</Badge></h1>
<h2>Example heading <Badge bg='secondary'>New</Badge></h2>
<h3>Example heading <Badge bg='secondary'>New</Badge></h3>
<h4>Example heading <Badge bg='secondary'>New</Badge></h4>
<h5>Example heading <Badge bg='secondary'>New</Badge></h5>
<h6>Example heading <Badge bg='secondary'>New</Badge></h6>
import Badge from 'react-bootstrap/Badge'
import ListGroup from 'react-bootstrap/ListGroup'
{/* Badges inside list group */}
<ListGroup>
<ListGroup.Item action href='#' className='d-flex justify-content-between align-items-center'>
Messages <Badge pill bg='info'>4</Badge>
</ListGroup.Item>
<ListGroup.Item action href='#' className='d-flex justify-content-between align-items-center'>
Orders <Badge pill bg='warning'>2</Badge>
</ListGroup.Item>
<ListGroup.Item action href='#' className='d-flex justify-content-between align-items-center'>
Favorites <Badge pill bg='danger'>6</Badge>
</ListGroup.Item>
</ListGroup>