Pill / Badge

TIP

A pill (or badge) can be used for displaying filters or highlighting links on top of images.

WARNING

Use the <button> tag for interactive elements and <a href="#"> for navigation.

.c-pill

Default Pill

<button class="c-pill">I'm a Pill</button>
<button class="c-pill">I'm a Pill</button>
<button class="c-pill">I'm a Pill</button>

Small Pill

.c-pill.-small

<button class="c-pill -small">I'm a small Pill</button>
<button class="c-pill -primary -small">42</button>
<button class="c-pill -primary -small">0</button>

Colors

Primary Pill

.c-pill.-primary

  <button class="c-pill -primary -small">I'm a primary small Pill</button>
  <button class="c-pill -primary -small">42</button>
  <button class="c-pill -primary ">I'm a primary Pill</button>

State Colors

.c-pill[.-success, .-warning, .-error]

  <button class="c-pill -success -small">I'm a success</button>
  <button class="c-pill -warning ">I'm a warning</button>
  <button class="c-pill -error -small">error</button>

Step Pill

.c-pill.-step

1.2.

<span class="c-pill -step">1.</span>
<span class="c-pill -step">2.</span>