---
title: "Badge"
group: bootstrap-ui
---
<div class="row">
  <div class="col-sm-12 col-lg-10 offset-lg-1">
    <h5 id="Badges">Badges</h5>
    <p>Scale to parent</p>
    <div class="mb-4">
      <div>
        <h1>Heading
          <span class="badge badge-secondary">New</span>
        </h1>
        <h2>Heading
          <span class="badge badge-secondary">New</span>
        </h2>
        <h3>Heading
          <span class="badge badge-secondary">New</span>
        </h3>
        <h4>Heading
          <span class="badge badge-secondary">New</span>
        </h4>
        <h5>Heading
          <span class="badge badge-secondary">New</span>
        </h5>
        <h6>Heading
          <span class="badge badge-secondary">New</span>
        </h6>
      </div>
    </div>
    <p>Badges can be used as part of links or buttons to provide a counter.</p>
    <div class="mb-4">
      <div>
        <button class="btn btn-outline-primary">Notifications
          <span class="badge badge-secondary">4</span>
        </button>
      </div>
    </div>
    <h5 id="Contextual-variations">Contextual variations</h5>
    <div class="mb-4">
      <div>
        <span class="mr-1 badge badge-primary">Primary</span>
        <span class="mr-1 badge badge-secondary">Secondary</span>
        <span class="mr-1 badge badge-success">Success</span>
        <span class="mr-1 badge badge-danger">Danger</span>
        <span class="mr-1 badge badge-warning">Warning</span>
        <span class="mr-1 badge badge-info">Info</span>
        <span class="mr-1 badge badge-light">Light</span>
        <span class="mr-1 badge badge-dark">Dark</span>
      </div>
    </div>
    <h5 id="Pills">Pills</h5>
    <div class="mb-4">
      <div>
        <span class="mr-1 badge badge-primary badge-pill">Primary</span>
        <span class="mr-1 badge badge-secondary badge-pill">Secondary</span>
        <span class="mr-1 badge badge-success badge-pill">Success</span>
        <span class="mr-1 badge badge-danger badge-pill">Danger</span>
        <span class="mr-1 badge badge-warning badge-pill">Warning</span>
        <span class="mr-1 badge badge-info badge-pill">Info</span>
        <span class="mr-1 badge badge-light badge-pill">Light</span>
        <span class="mr-1 badge badge-dark badge-pill">Dark</span>
      </div>
    </div>
    <h5 id="Links">Links</h5>
    <p>Adding the
      <code>href</code>
      prop (without specifying a
      <code>tag</code>
      prop) will default the badge to a link.</p>
    <div class="mb-0">
      <div>
        <a class="mr-1 badge badge-primary" href="#">Primary</a>
        <a class="mr-1 badge badge-secondary" href="#">Secondary</a>
        <a class="mr-1 badge badge-success" href="#">Success</a>
        <a class="mr-1 badge badge-danger" href="#">Danger</a>
        <a class="mr-1 badge badge-warning" href="#">Warning</a>
        <a class="mr-1 badge badge-info" href="#">Info</a>
        <a class="mr-1 badge badge-light" href="#">Light</a>
        <a class="mr-1 badge badge-dark" href="#">Dark</a>
      </div>
    </div>
  </div>
</div>