Badges

Documentation and examples for badges, our small count and labeling component.

Contextual badges

Add any of the below mentioned modifier classes to change the appearance of a badge.

primarysecondarysuccessdangerwarninginfolightdark

<Badge pill bg="primary"  className="me-1">primary</Badge>
<Badge pill bg="secondary"  className="me-1">secondary</Badge>
<Badge pill bg="success"  className="me-1">success</Badge>
<Badge pill bg="danger"  className="me-1">danger</Badge>
<Badge pill bg="warning"  className="me-1">warning</Badge>
<Badge pill bg="info"  className="me-1">info</Badge>
<Badge pill bg="light" text="dark" className="me-1">light</Badge>
<Badge pill bg="dark"  className="me-1">dark</Badge>

Pill badges

Use the pill modifier to make badges more rounded (with a larger border-radius and additional horizontal padding).

Design

Code

primarysecondarysuccessdangerwarninginfolightdark

<Badge pill bg="primary"  className="me-1">primary</Badge>
<Badge pill bg="secondary"  className="me-1">secondary</Badge>
<Badge pill bg="success"  className="me-1">success</Badge>
<Badge pill bg="danger"  className="me-1">danger</Badge>
<Badge pill bg="warning"  className="me-1">warning</Badge>
<Badge pill bg="info"  className="me-1">info</Badge>
<Badge pill bg="light" text="dark" className="me-1">light</Badge>
<Badge pill bg="dark"  className="me-1">dark</Badge>

Simple Badge

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Design

Code

Example heading New

<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>

Badge with Button

Badges can be used as part of links or buttons to provide a counter.

Design

Code

<Button variant="primary">
    Notifications <Badge bg="light" className="text-primary">4</Badge>                                        
</Button>

Dot

Use <DotBadge> component with bg=* primary, secondary etc... for dot badge color

Design

Code

Primary Secondary Success Danger Warning Info Light Dark

<DotBadge bg="primary" className='me-2'>Primary</DotBadge>
<DotBadge bg="secondary" className='me-2'>Secondary</DotBadge>
<DotBadge bg="success" className='me-2'>Success</DotBadge>
<DotBadge bg="danger" className='me-2'>Danger</DotBadge>
<DotBadge bg="warning" className='me-2'>Warning</DotBadge>
<DotBadge bg="info" className='me-2'>Info</DotBadge>
<DotBadge bg="light" className='me-2'>Light</DotBadge>
<DotBadge bg="dark" className='me-2'>Dark</DotBadge>

Positioned

Use utilities to modify a .badge and position it in the corner of a link or button.

Design

Code

<Button type="button" className="btn btn-primary position-relative">
	Inbox
	<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
		99+
	</span>
</Button>