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>

EasyLink.Me

Product of Cosmic Stack