Badges

  1. Elements
  2. Badges
Badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="primary">Primary</Badge>
<Badge bg="secondary">Secondary</Badge>
<Badge bg="success">Success</Badge>
<Badge bg="danger">Danger</Badge>
<Badge bg="warning">Warning</Badge>
<Badge bg="info">Info</Badge>
<Badge bg="light">Light</Badge>
<Badge bg="dark">Dark</Badge>
Pill badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="primary" className="rounded-pill">Primary</Badge>
<Badge bg="secondary" className="rounded-pill">Secondary</Badge>
<Badge bg="success" className="rounded-pill">Success</Badge>
<Badge bg="danger" className="rounded-pill">Danger</Badge>
<Badge bg="warning" className="rounded-pill">Warning</Badge>
<Badge bg="info" className="rounded-pill">Info</Badge>
<Badge bg="light" className="rounded-pill">Light</Badge>
<Badge bg="dark" className="rounded-pill">Dark</Badge>
Light Badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="primary-transparent">Primary</Badge>
<Badge bg="secondary-transparent">Secondary</Badge>
<Badge bg="success-transparent">Success</Badge>
<Badge bg="danger-transparent">Danger</Badge>
<Badge bg="warning-transparent">Warning</Badge>
<Badge bg="info-transparent">Info</Badge>
<Badge bg="light-transparent">Light</Badge>
<Badge bg="dark-transparent">Dark</Badge>
Light Pill Badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="primary-transparent" className="rounded-pill">Primary</Badge>
<Badge bg="secondary-transparent" className="rounded-pill">Secondary</Badge>
<Badge bg="success-transparent" className="rounded-pill">Success</Badge>
<Badge bg="danger-transparent" className="rounded-pill">Danger</Badge>
<Badge bg="warning-transparent" className="rounded-pill">Warning</Badge>
<Badge bg="info-transparent" className="rounded-pill">Info</Badge>
<Badge bg="light-transparent" className="rounded-pill">Light</Badge>
<Badge bg="dark-transparent" className="rounded-pill">Dark</Badge>
Gradient Badges
PrimarysecondarySuccessDangerWarningInfoorangepurple
<Badge bg="primary-gradient">Primary</Badge>
<Badge bg="secondary-gradient">Secondary</Badge>
<Badge bg="success-gradient">Success</Badge>
<Badge bg="danger-gradient">Danger</Badge>
<Badge bg="warning-gradient">Warning</Badge>
<Badge bg="info-gradient">Info</Badge>
<Badge bg="orange-gradient">Light</Badge>
<Badge bg="purple-gradient">Dark</Badge>
Gradient Pill Badges
PrimarysecondarySuccessDangerWarningInfoorangepurple
 <Badge bg="primary-gradient" className="rounded-pill">Primary</Badge>
<Badge bg="secondary-gradient" className="rounded-pill">Secondary</Badge>
<Badge bg="success-gradient" className="rounded-pill">Success</Badge>
<Badge bg="danger-gradient" className="rounded-pill">Danger</Badge>
<Badge bg="warning-gradient" className="rounded-pill">Warning</Badge>
<Badge bg="info-gradient" className="rounded-pill">Info</Badge>
<Badge bg="orange-gradient" className="rounded-pill">Light</Badge>
<Badge bg="purple-gradient" className="rounded-pill">Dark</Badge>
Outline Badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="primary">Primary</Badge>
<Badge bg="secondary">Secondary</Badge>
<Badge bg="success">Success</Badge>
<Badge bg="danger">Danger</Badge>
<Badge bg="warning">Warning</Badge>
<Badge bg="info">Info</Badge>
<Badge bg="light" className="text-dark">Light</Badge>
<Badge bg="dark">Dark</Badge>
Outline Pill Badges
PrimarysecondarySuccessDangerWarningInfoLightDark
<Badge bg="outline-primary" className=" rounded-pill">Primary</Badge>
<Badge bg="outline-secondary" className=" rounded-pill ">Secondary</Badge>
<Badge bg="outline-success" className=" rounded-pill ">Success</Badge>
<Badge bg="outline-danger" className=" rounded-pill ">Danger</Badge>
<Badge bg="outline-warning" className=" rounded-pill ">Warning</Badge>
<Badge bg="outline-info" className=" rounded-pill ">Info</Badge>
<Badge bg="outline-light" className=" rounded-pill  text-dark">Light</Badge>
<Badge bg="outline-dark" className=" rounded-pill">Dark</Badge>
Buttons With Badges
<Button variant='primary' type="button" className="btn  my-1 me-2">
 Notifications <Badge bg="secondary" className="badge ms-2 ">4</Badge>
</Button>
<Button variant='secondary' type="button" className="btn  my-1 me-2">
 Notifications <Badge bg="primary" className="badge ms-2 ">7</Badge>
</Button>
<Button variant='success' type="button" className="btn  my-1 me-2">
 Notifications <Badge bg="danger" className="badge ms-2 ">12</Badge>
</Button>
<Button variant='info' type="button" className="btn  my-1 me-2">
 Notifications <Badge bg="warning" className="badge ms-2 ">32</Badge>
</Button>
Outline Button Badges
<Button variant='outline-primary' type="button" className="btn  my-1 me-2">
Notifications <Badge bg="" className="badge ms-2">4</Badge>
</Button>
<Button variant='outline-secondary' type="button" className="btn  my-1 me-2">
Notifications <Badge bg="" className="badge ms-2">7</Badge>
</Button>
<Button variant='outline-success' type="button" className="btn  my-1 me-2">
Notifications <Badge bg="" className="badge ms-2">12</Badge>
</Button>
<Button variant='outline-info' type="button" className="btn  my-1 me-2">
Notifications <Badge bg="" className="badge ms-2">32</Badge>
</Button>
Headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <Badge bg="primary" className="badge">New</Badge></h1>
<h2>Example heading <Badge bg="primary" className="badge">New</Badge></h2>
<h3>Example heading <Badge bg="primary" className="badge">New</Badge></h3>
<h4>Example heading <Badge bg="primary" className="badge">New</Badge></h4>
<h5>Example heading <Badge bg="primary" className="badge">New</Badge></h5>
<h6>Example heading <Badge bg="primary" className="badge">New</Badge></h6>
Positioned Badges
imgimgimg1000+
<Button variant='primary' type="button" className="btn  position-relative">
Inbox
<span className="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span className="visually-hidden">unread messages</span>
</span>
</Button>
<Button variant='secondary' type="button" className="btn  position-relative">
Profile
<span className="position-absolute top-0 start-100 translate-middle p-2 bg-success border border-light rounded-circle">
    <span className="visually-hidden">New alerts</span>
</span>
</Button>
<span className="avatar">
<img src={"../../../assets/images/faces/2.jpg"} alt="img"/>
<span className="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
<span className="visually-hidden">New alerts</span>
</span>
</span>
<span className="avatar avatar-rounded">
<img src={"../../../assets/images/faces/15.jpg"} alt="img"/>
<span className="position-absolute top-0 start-100 translate-middle p-1 bg-success border border-light rounded-circle">
    <span className="visually-hidden">New alerts</span>
</span>
</span>
<span className="avatar avatar-rounded">
<img src={"../../../assets/images/faces/10.jpg"} alt="img"/>
<span className="position-absolute top-0 start-100 translate-middle badge bg-secondary rounded-pill shadow-lg">1000+
    <span className="visually-hidden">New alerts</span>
</span>
</span>
Custom Badges
Hot1413.2kInbox32
<Badge bg="outline-secondary" className="badge  custom-badge fs-15 me-5 m-2"><i className="ti ti-flame me-1"></i>Hot</Badge>
<Badge bg="" className="icon-badge me-5 m-2">
    <svg className="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
    <Badge className="badge rounded-pill bg-success">14</Badge>
</Badge>
<Badge bg="" className="badge border bg-light text-default custom-badge me-5 m-2"><i className="fe fe-eye me-1 d-inline-block"></i>13.2k</Badge>
<span className="text-badge me-5 m-2">
    <span className="text fs-18">Inbox</span>
    <Badge bg="success" className="badge rounded-pill bg-success">32</Badge>
</span>