Badges
Documentation and examples for badges, our small count and labeling component.
Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a badge.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Info
- Info
import Badge from 'react-bootstrap/Badge';
<Badge bg="primary">Primary</Badge>
<Badge bg="secondary">Secondary</Badge>
<Badge bg="success">Success</Badge>
<Badge bg="danger">Danger</Badge>
<Badge bg="warning text-bg-light">Warning</Badge>
<Badge bg="info">Info</Badge>
<Badge bg="light text-bg-light">Light</Badge>
<Badge bg="dark">Dark</Badge>
<Badge bg="badge text-bg-primary-soft">Primary</Badge>
<Badge bg="badge text-bg-secondary-soft">Secondary</Badge>
<Badge bg="badge text-bg-success-soft">Success</Badge>
<Badge bg="badge text-bg-danger-soft">Danger</Badge>
<Badge bg="badge text-bg-warning-soft">Warning</Badge>
<Badge bg="badge text-bg-info-soft">Info</Badge>
<Badge bg="badge text-bg-light-soft text-base">Info</Badge>
<Badge bg="badge text-bg-dark-soft">Info</Badge>
Pill badges
Use the pill modifier class to make badges more rounded (with a larger border-radius). Useful if you miss the badges from v3.
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
import Badge from 'react-bootstrap/Badge';
<Badge pill bg="primary">Primary</Badge>
<Badge pill bg="secondary">Secondary</Badge>
<Badge pill bg="success">Success</Badge>
<Badge pill bg="danger">Danger</Badge>
<Badge pill bg="warning text-bg-light">Warning</Badge>
<Badge pill bg="info">Info</Badge>
<Badge pill bg="light text-bg-light">Light</Badge>
<Badge pill bg="dark">Dark</Badge>
Positioned
Try with flowing code examples to use icons in buttons
import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';
<Button variant="primary position-relative">
Inbox
<Badge bg="danger position-absolute top-0 start-100 translate-middle rounded-pill">
99+
</Badge>
</Button>
<Button variant="primary position-relative">
Inbox
<Badge bg="danger position-absolute top-0 start-100 translate-middle p-1 border border-light rounded-circle">
<span className="visually-hidden">New alerts</span>
</Badge>
</Button>
Buttons
Badges can be used as part of links or buttons to provide a counter.
import Badge from 'react-bootstrap/Badge';
import Button from 'react-bootstrap/Button';
<Button variant="primary">
Notifications
<Badge bg="badge text-bg-light ms-1">4</Badge>
</Button>