Design Kit

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. -dark) can also be applied to provide alternate styling.

Base

Base
Primary
Success
Warning
Danger
Dark
Muted
Secondary
Light
<!-- For light backgrounds -->
<div class="a-badge">
  <span>Base</span>
</div>
<div class="a-badge -primary">
  <span>Primary</span>
</div>
<div class="a-badge -success">
  <span>Success</span>
</div>
<div class="a-badge -warning">
  <span>Warning</span>
</div>
<div class="a-badge -danger">
  <span>Danger</span>
</div>
<div class="a-badge -dark">
  <span>Dark</span>
</div>
<div class="a-badge -muted">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary">
  <span>Secondary</span>
</div>
<div class="a-badge -light">
  <span>Light</span>
</div>

Outline

Primary
Success
Warning
Danger
Dark
Muted
Secondary
Light
<!-- For light backgrounds -->
<div class="a-badge -primary -outline">
  <span>Primary</span>
</div>
<div class="a-badge -success -outline">
  <span>Success</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 -muted -outline">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary -outline">
  <span>Secondary</span>
</div>
<div class="a-badge -light -outline">
  <span>Light</span>
</div>

Flat

Primary
Success
Warning
Danger
Dark
Muted
Secondary
Light
<!-- For light backgrounds -->
<div class="a-badge -primary -flat">
  <span>Primary</span>
</div>
<div class="a-badge -success -flat">
  <span>Success</span>
</div>
<div class="a-badge -warning -flat">
  <span>Warning</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 -muted -flat">
  <span>Muted</span>
</div>
<!-- For dark backgrounds -->
<div class="a-badge -secondary -flat">
  <span>Secondary</span>
</div>
<div class="a-badge -light -flat">
  <span>Light</span>
</div>

Icon badges

Icons can be placed before, after, or on both sides of text.

Badge
Badge
Active
Away
Do not disturb
Offline
<div class="a-badge">
  <div class="a-badge__content">
    <i class="a-icon -xs icon-plus"></i>
    <span>Badge</span>
  </div>
</div>
<div class="a-badge">
  <div class="a-badge__content">
    <span>Badge</span>
    <i class="a-icon -xs icon-x"></i>
  </div>
</div>
<div class="a-badge -flat -success">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Active</span>
  </div>
</div>
<div class="a-badge -flat -warning">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-clock"></i>
    <span>Away</span>
  </div>
</div>
<div class="a-badge -flat -danger">
  <div class="a-badge__content">
    <i class="a-icon icon-circle-minus"></i>
    <span>Do not disturb</span>
  </div>
</div>
<div class="a-badge -flat -muted">
  <div class="a-badge__content">
    <i class="a-icon icon-circle"></i>
    <span>Offline</span>
  </div>
</div>

Additional Sizes

Small

Use the -sm modifier class to render small badges.

Badge
Badge
<div class="a-badge -sm">
  <span>Badge</span>
</div>
<div class="a-badge -flat -sm">
  <div class="a-badge__content">
    <i class="a-icon icon-atom"></i>
    <span>Badge</span>
  </div>
</div>

Extra small

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

Badge
Badge
<div class="a-badge -xs">
  <span>Badge</span>
</div>
<div class="a-badge -flat -xs">
  <div class="a-badge__content">
    <i class="a-icon icon-atom"></i>
    <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.

Badge
<div class="a-badge -text--uppercase">
  <span>Badge</span>
</div>