Badges

Small count and labeling component.

React Bootstrap docs

Contextual variations

PrimaryAccentSecondarySuccessDangerWarningInfo
Light
Dark
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>

Translucent badges

PrimaryAccentSuccessDangerWarningInfo
Light
Dark
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>

Pill badges

PrimaryAccentSecondarySuccessDangerWarningInfo
Light
Dark
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>

Inside heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
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>

Inside button

import Badge from 'react-bootstrap/Badge'
import Button from 'react-bootstrap/Button'

{/* Button + badge */}
<Button variant='primary'>
  Notifications <Badge bg='light' className='ms-1'>4</Badge>
</Button>

{/* Pill button + pill badge */}
<Button variant='dark' className='rounded-pill'>
  Profile <Badge pill bg='info' className='ms-1'>9</Badge>
</Button>

{/* Outline button + badge */}
<Button variant='outline-secondary'>
  Messages <Badge bg='success' className='ms-1'>18</Badge>
</Button>

Inside list group

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>