# Badges

Documentation and examples for badges, our small count and labeling component.

## Headings

# Example heading New

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

## Buttons

    <!--Button-->
    <button type="button" class="btn btn-primary">
      Notifications <span class="badge text-bg-secondary">4</span>
    </button>

## Position

    <!--Buttons-->
      <button type="button" class="btn btn-primary position-relative">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
          99+
          <span class="visually-hidden">unread messages</span>
        </span>
      </button>

You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.

## Position

    <!--Button-->
      <button type="button" class="btn btn-primary position-relative">
        Profile
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
          <span class="visually-hidden">New alerts</span>
        </span>
      </button>

## Background colors

Primary Secondary Success Danger Warning Info Light Dark

    <!--Background color-->
      <span class="badge text-bg-primary">Primary</span>
      <span class="badge text-bg-secondary">Secondary</span>
      <span class="badge text-bg-success">Success</span>
      <span class="badge text-bg-danger">Danger</span>
      <span class="badge text-bg-warning">Warning</span>
      <span class="badge text-bg-info">Info</span>
      <span class="badge text-bg-light">Light</span>
      <span class="badge text-bg-dark">Dark</span>

## Pill badges

Primary Secondary Success Danger Warning Info Light Dark

    <!--Pill badge-->
      <span class="badge rounded-pill text-bg-primary">Primary</span>
      <span class="badge rounded-pill text-bg-secondary">Secondary</span>
      <span class="badge rounded-pill text-bg-success">Success</span>
      <span class="badge rounded-pill text-bg-danger">Danger</span>
      <span class="badge rounded-pill text-bg-warning">Warning</span>
      <span class="badge rounded-pill text-bg-info">Info</span>
      <span class="badge rounded-pill text-bg-light">Light</span>
      <span class="badge rounded-pill text-bg-dark">Dark</span>