Pill

Pills are used visually highlight information or indicate states

Usage

Pill

<span class="c-pill">Pill</span>

Implementation

Type	Name
Element
Pill	`.c-pill`
Modifiers
Border	`.c-pill--border`
Color	`.c-pill--blue` `--white` `--gray` `--green` `--purple` `--orange` `--yellow` `--teal` `--pink`
Font style	`.c-pill--sans`
Dark	`.dark .c-pill`
States	None

Modifiers

Color

Default (gray) White Red Blue Green Purple Orange Yellow Teal Pink Hot Pink

<div class="space-x-1.5">
  <span class="c-pill">Default (gray)</span>
  <span class="c-pill c-pill--white">White</span>
  <span class="c-pill c-pill--red">Red</span>
  <span class="c-pill c-pill--blue">Blue</span>
  <span class="c-pill c-pill--green">Green</span>
  <span class="c-pill c-pill--purple">Purple</span>
  <span class="c-pill c-pill--orange">Orange</span>
  <span class="c-pill c-pill--yellow">Yellow</span>
  <span class="c-pill c-pill--teal">Teal</span>
  <span class="c-pill c-pill--pink">Pink</span>
  <span class="c-pill c-pill--hot-pink">Hot Pink</span>
</div>

Border

Default (gray) White Red Blue Green Purple Orange Yellow Teal Pink Hot Pink

<div class="space-x-1.5">
  <span class="c-pill c-pill--border">Default (gray)</span>
  <span class="c-pill c-pill--white c-pill--border">White</span>
  <span class="c-pill c-pill--red c-pill--border">Red</span>
  <span class="c-pill c-pill--blue c-pill--border">Blue</span>
  <span class="c-pill c-pill--green c-pill--border">Green</span>
  <span class="c-pill c-pill--purple c-pill--border">Purple</span>
  <span class="c-pill c-pill--orange c-pill--border">Orange</span>
  <span class="c-pill c-pill--yellow c-pill--border">Yellow</span>
  <span class="c-pill c-pill--teal c-pill--border">Teal</span>
  <span class="c-pill c-pill--pink c-pill--border">Pink</span>
  <span class="c-pill c-pill--hot-pink c-pill--border">Hot Pink</span>
</div>

Dark

Default (gray) White Red Blue Green Purple Orange Yellow Teal Pink Hot Pink

<div class="dark bg-gray-900 -m-6 p-6 space-x-1.5">
  <span class="c-pill">Default (gray)</span>
  <span class="c-pill c-pill--white">White</span>
  <span class="c-pill c-pill--red">Red</span>
  <span class="c-pill c-pill--blue">Blue</span>
  <span class="c-pill c-pill--green">Green</span>
  <span class="c-pill c-pill--purple">Purple</span>
  <span class="c-pill c-pill--orange">Orange</span>
  <span class="c-pill c-pill--yellow">Yellow</span>
  <span class="c-pill c-pill--teal">Teal</span>
  <span class="c-pill c-pill--pink">Pink</span>
  <span class="c-pill c-pill--hot-pink">Hot Pink</span>
</div>