Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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

    <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

Messages 14 Orders 2 Favourites 6

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