Silicon Silicon UI Kit
 Buy now

Badges

Small count and labeling component.

Bootstrap docs

Background colors

Primary Secondary Success Danger Warning Info
Light
Dark
Primary Success Danger Warning Info
Light
Dark 
<!-- Primary badge -->
<span class="badge bg-primary">Primary</span>

<!-- Secondary badge -->
<span class="badge bg-secondary">Secondary</span>

<!-- Success badge -->
<span class="badge bg-success">Success</span>

<!-- Danger badge -->
<span class="badge bg-danger">Danger</span>

<!-- Warning badge -->
<span class="badge bg-warning">Warning</span>

<!-- Info badge -->
<span class="badge bg-info">Info</span>

<!-- Light badge -->
<span class="badge bg-light">Light</span>

<!-- Dark badge -->
<span class="badge bg-dark">Dark</span>

<!-- Primary faded badge -->
<span class="badge bg-faded-primary text-primary">Primary</span>

<!-- Success faded badge -->
<span class="badge bg-faded-success text-success">Success</span>

<!-- Danger faded badge -->
<span class="badge bg-faded-danger text-danger">Danger</span>

<!-- Warning faded badge -->
<span class="badge bg-faded-warning text-warning">Warning</span>

<!-- Info faded badge -->
<span class="badge bg-faded-info text-info">Info</span>

<!-- Light faded badge -->
<span class="badge bg-faded-light">Light</span>

<!-- Dark faded badge -->
<span class="badge bg-faded-dark text-dark">Dark</span>

Badge with shadow

Primary Secondary Success Danger Warning Info Light Dark 
<!-- Primary badge with shadow -->
<span class="badge bg-primary shadow-primary">Primary</span>

<!-- Secondary badge with shadow -->
<span class="badge bg-secondary shadow-secondary">Secondary</span>

<!-- Success badge with shadow -->
<span class="badge bg-success shadow-success">Success</span>

<!-- Danger badge with shadow -->
<span class="badge bg-danger shadow-danger">Danger</span>

<!-- Warning badge with shadow -->
<span class="badge bg-warning shadow-warning">Warning</span>

<!-- Info badge with shadow -->
<span class="badge bg-info shadow-info">Info</span>

<!-- Light badge with shadow -->
<span class="badge bg-light shadow-secondary">Light</span>

<!-- Dark badge with shadow -->
<span class="badge bg-dark shadow-dark">Dark</span>

Pill badges

Primary Secondary Success Danger Warning Info
Light
Dark 
<!-- Primary badge -->
<span class="badge bg-primary rounded-pill">Primary</span>

<!-- Secondary badge -->
<span class="badge bg-secondary rounded-pill">Secondary</span>

<!-- Success badge -->
<span class="badge bg-success rounded-pill">Success</span>

<!-- Danger badge -->
<span class="badge bg-danger rounded-pill">Danger</span>

<!-- Warning badge -->
<span class="badge bg-warning rounded-pill">Warning</span>

<!-- Info badge -->
<span class="badge bg-info rounded-pill">Info</span>

<!-- Light badge -->
<span class="badge bg-light rounded-pill">Light</span>

<!-- Dark badge -->
<span class="badge bg-dark rounded-pill">Dark</span>

Inside heading

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
<h1>Example heading <span class="badge bg-secondary ms-1">New</span></h1>
<h2>Example heading <span class="badge bg-secondary ms-1">New</span></h2>
<h3>Example heading <span class="badge bg-secondary ms-1">New</span></h3>
<h4>Example heading <span class="badge bg-secondary ms-1">New</span></h4>
<h5>Example heading <span class="badge bg-secondary ms-1">New</span></h5>
<h6>Example heading <span class="badge bg-secondary ms-1">New</span></h6>

Inside button

<!-- Button + badge -->
<button class="btn btn-info" type="button">
  Notifications 
  <span class="badge bg-light ms-2">4</span>
</button>
  
<!-- Pill button + pill badge -->
<button class="btn rounded-pill btn-dark" type="button">
  Profile 
  <span class="badge rounded-pill bg-danger ms-2">9</span>
</button>

<!-- Button + faded badge -->
<button class="btn btn-outline-secondary" type="button">
  Messages 
  <span class="badge bg-faded-success text-success ms-2">18</span>
</button>

Inside list group

<!-- Badges inside list group -->
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Messages
    <span class="badge rounded-pill bg-info">14</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Orders
    <span class="badge rounded-pill bg-warning">2</span>
  </a>
  <a href="#" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    Favourites
    <span class="badge rounded-pill bg-danger">6</span>
  </a>
</div>
Top