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

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

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.