Badge

Badges are inline elements used to label, categorize, or organize a list of items.

Examples

To display a badge, use the class a-badge. A contextual class (e.g. -danger) can also be applied to provide alternate styling.

Base

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge">
  <span>Base</span>
</div>
<div class="a-badge -primary">
  <span>Primary</span>
</div>
<div class="a-badge -secondary">
  <span>Secondary</span>
</div>
<div class="a-badge -danger">
  <span>Danger</span>
</div>
<div class="a-badge -dark">
  <span>Dark</span>
</div>
<div class="a-badge -light">
  <span>Light</span>
</div>

Outline

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge -outline">
  <span>Base</span>
</div>
<div class="a-badge -primary -outline">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -outline">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -outline">
  <span>Danger</span>
</div>
<div class="a-badge -dark -outline">
  <span>Dark</span>
</div>
<div class="a-badge -light -outline">
  <span>Light</span>
</div>

Flat

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge -flat">
  <span>Base</span>
</div>
<div class="a-badge -primary -flat">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -flat">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -flat">
  <span>Danger</span>
</div>
<div class="a-badge -dark -flat">
  <span>Dark</span>
</div>
<div class="a-badge -light -flat">
  <span>Light</span>
</div>

Pills

Use the -pill modifier class to render badges with a more pronounced border-radius.

Base

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge -pill">
  <span>Base</span>
</div>
<div class="a-badge -primary -pill">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -pill">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -pill">
  <span>Danger</span>
</div>
<div class="a-badge -dark -pill">
  <span>Dark</span>
</div>
<div class="a-badge -light -pill">
  <span>Light</span>
</div>

Outline

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge -pill -outline">
  <span>Base</span>
</div>
<div class="a-badge -primary -pill -outline">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -pill -outline">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -pill -outline">
  <span>Danger</span>
</div>
<div class="a-badge -dark -pill -outline">
  <span>Dark</span>
</div>
<div class="a-badge -light -pill -outline">
  <span>Light</span>
</div>

Icon badges

Badge
Badge
Badge
<div class="a-badge -flat">
  <div class="a-badge__content">
    <div class="a-icon">
      <svg>
       <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Badge</span>
  </div>
</div>
<div class="a-badge -flat">
  <div class="a-badge__content">
    <span>Badge</span>
    <div class="a-icon">
      <svg>
       <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</div>
<div class="a-badge -flat">
  <div class="a-badge__content">
    <div class="a-icon">
      <svg>
        <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Badge</span>
    <div class="a-icon">
      <svg>
       <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
  </div>
</div>

Additional Sizes

Small

Use the -small modifier class to render small badges.

Base
Primary
Secondary
Danger
Dark
Light
Badge
<div class="a-badge -small">
  <span>Base</span>
</div>
<div class="a-badge -primary -small">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -small">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -small">
  <span>Danger</span>
</div>
<div class="a-badge -dark -small">
  <span>Dark</span>
</div>
<div class="a-badge -light -small">
  <span>Light</span>
</div>
<div class="a-badge -flat -small">
  <div class="a-badge__content">
    <div class="a-icon">
      <svg>
       <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Badge</span>
  </div>
</div>

Smaller

Use the -smaller modifier class to render even smaller badges.

Base
Primary
Secondary
Danger
Dark
Light
Badge
<div class="a-badge -smaller">
  <span>Base</span>
</div>
<div class="a-badge -primary -smaller">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -smaller">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -smaller">
  <span>Danger</span>
</div>
<div class="a-badge -dark -smaller">
  <span>Dark</span>
</div>
<div class="a-badge -light -smaller">
  <span>Light</span>
</div>
<div class="a-badge -flat -smaller">
  <div class="a-badge__content">
    <div class="a-icon">
      <svg>
       <use xlink:href="#icon-atom"></use>
      </svg>
    </div>
    <span>Badge</span>
  </div>
</div>

Text Transform

Uppercase

Use the -text--uppercase text utility class to render badges in all uppercase. -text--lowercase and -text--capitalized are also supported.

Base
Primary
Secondary
Danger
Dark
Light
<div class="a-badge">
  <span>Base</span>
</div>
<div class="a-badge -primary -text--uppercase">
  <span>Primary</span>
</div>
<div class="a-badge -secondary -text--uppercase">
  <span>Secondary</span>
</div>
<div class="a-badge -danger -text--uppercase">
  <span>Danger</span>
</div>
<div class="a-badge -dark -text--uppercase">
  <span>Dark</span>
</div>
<div class="a-badge -light -text--uppercase">
  <span>Light</span>
</div>