Pills

Pill

A rounded, pill-shaped badge. A pill can support color by adding a text or background modifier.

Pills have no hover state.

Demo

Active
Active
Active
Active

Markup

<div class="pill">
  Active
</div>
<div class="pill text--white background--navy">
  Active
</div>
<div class="pill text--white background--skyblue">
  Active
</div>
<div class="pill text--white background--salmon">
  Active
</div>

Split

Demo

Left:
Right
Left:
Right
Left
Middle
Right

Markup

<div class="pill pill--split">
  <div class="pill__label">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text--white background--peach">
  <div class="pill__label text--brown">Left:</div>
  <div class="pill__content">Right</div>
</div>
<div class="pill pill--split text--white background--navy">
  <div class="pill__content background--salmon">Left</div>
  <div class="pill__content background--olive">Middle</div>
  <div class="pill__content background--skyblue">Right</div>
</div>

Circle

Pills can be circular.

Demo

33
33

Markup

<div class="pill pill--circle">
  <!-- Optional content here! -->
</div>
<div class="pill pill--circle text--white background--salmon">
  <!-- Optional content here! -->
</div>

Modifiers

Modifier †Behavior
pill--circle-empty-dot

Dot pill intended to remain empty.

pill--circle-empty

Small, circular pull intended to remain empty.

pill--circle

Circular pill intended to contain content.

pill--circle-medium

Medium circular pill intended to contain content.

pill--circle-large

Large circular pill intended to contain content.

The base class is always required.