Badges

Badges

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

Default Primary Success Danger Info Warning 

    <div className="example">
    <Badge bg="default">Default</Badge> {' '}
    <Badge bg="primary">Primary</Badge>{' '}
    <Badge bg="success">Success</Badge>{' '}
    <Badge bg="danger">Danger</Badge>{' '}
    <Badge bg="info">Info</Badge>{' '}
    <Badge bg="warning">Warning</Badge>{' '}

  </div>
Pill Badges

Use the .rounded-pill modifier className to make badges more rounded.

Default Primary Success Danger Info Warning 

     <div className="example">
     <Badge pill bg="default">Default</Badge> {' '}
     <Badge pill bg="primary">Primary</Badge>{' '}
     <Badge pill bg="success">Success</Badge>{' '}
     <Badge pill bg="danger">Danger</Badge>{' '}
     <Badge pill bg="info">Info</Badge>{' '}
     <Badge pill bg="warning">Warning</Badge>{' '}
   </div>
Gradient Badges

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

Default Primary Success Danger Info Warning 

    <div className="example">
    <Badge bg="default">Default</Badge> {' '}
    <Badge bg="primary-gradient">Primary</Badge>{' '}
    <Badge bg="success-gradient">Success</Badge>{' '}
    <Badge bg="danger-gradient">Danger</Badge>{' '}
    <Badge bg="info-gradient">Info</Badge>{' '}
    <Badge bg="warning-gradient">Warning</Badge>{' '}

  </div>
Gradient Pill Badges

Use the .rounded-pill modifier className to make badges more rounded.

Default Primary Success Danger Info Warning 

   <div className="example">
   <Badge pill bg="default">Default</Badge> {' '}
   <Badge pill bg="primary-gradient">Primary</Badge>{' '}
   <Badge pill bg="success-gradient">Success</Badge>{' '}
   <Badge pill bg="danger-gradient">Danger</Badge>{' '}
   <Badge pill bg="info-gradient">Info</Badge>{' '}
   <Badge pill bg="warning-gradient">Warning</Badge>{' '}
 </div>
Buttons with Badges

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


 <div className="example2">

 <Button className="mt-1  mb-1 me-3" variant="primary">Notifications<Badge bg="white" className="text-primary ms-2">2</Badge></Button>

 <Button className="mt-1  mb-1 me-3" variant="secondary">Notifications<Badge bg="white" className="text-secondary ms-2">2</Badge></Button>

 <Button className="mt-1  mb-1 me-3" variant="success">Notifications<Badge bg="white" className="text-success ms-2">2</Badge></Button>

 <Button className="mt-1  mb-1 me-3" variant="info">Notifications<Badge bg="white" className="text-info ms-2">2</Badge></Button>

 <Button className="mt-1  mb-1 me-3" variant="warning">Notifications<Badge bg="white" className="text-warning ms-2">2</Badge></Button>

 <Button className="mt-1  mb-1 me-3" variant="danger">Notifications<Badge bg="white" className="text-danger ms-2">2</Badge></Button>
</div>
Buttons with Rounded Badges

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


<div className="example">

<Button variant="primary" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>


<Button variant="secondary" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>

<Button variant="success" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>

<Button variant="info" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>

<Button variant="warning" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>

<Button variant="green" className="position-relative me-5 mb-2"> Projects
  <Badge bg="danger" className="position-absolute top-0 start-100 translate-middle badge rounded-pill">20+</Badge>
  <span className="visually-hidden">unread messages</span></Button>
</div>
Heading Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.

Heading 01New

Heading 01New

Heading 01New

Heading 01New

Heading 01New
Heading 01New

 <div className="example">
 <h1>Heading 01<Badge bg="default">New</Badge></h1>
 <h2>Heading 01<Badge bg="default">New</Badge></h2>
 <h3>Heading 01<Badge bg="default">New</Badge></h3>
 <h4>Heading 01<Badge bg="default">New</Badge></h4>
 <h5>Heading 01<Badge bg="default">New</Badge></h5>
 <h6>Heading 01<Badge bg="default">New</Badge></h6>
</div>
Color Heading Badges

Badges scale to match the size of the immediate parent element by using relative font sizing and em units. As of v5, badges no longer have focus or hover styles for links.

Heading 01New

Heading 01New

Heading 01New

Heading 01New

Heading 01New
Heading 01New

    <div className="example">
    <h1 className="text-primary" >Heading 01<Badge bg="primary">New</Badge></h1>
    <h2 className="text-red" >Heading 01<Badge bg="danger">New</Badge></h2>
    <h3 className="text-yellow" >Heading 01<Badge bg="warning">New</Badge></h3>
    <h4 className="text-green" >Heading 01<Badge bg="success">New</Badge></h4>
    <h5 className="text-info" >Heading 01<Badge bg="info">New</Badge></h5>
    <h6 className="text-secondary" >Heading 01<Badge bg="secondary">New</Badge></h6>

  </div>