Pill

When to use it

The Pill component is used as "tags" and "flags" that often are clickable. They are commonly used to highlight categories, statuses, or other important information in a compact form.

Variants

The default color is --primary, but any other valid color can be used using utility classes.

Use the .c-pill--large modifier for a larger version or .c-pill--removable modifier to add a removable button to the pill (together with a .c-pill__button element, see examples).

Use the .c-pill--ghost modifier for a transparent pill with a 1px outline. When combined with a utility color class (e.g. u-color-green-base, u-color-blue-lighter) the text and outline adopt that color while the background stays transparent.

What it looks like

Code examples

Default

<a href="#" class="c-pill"><span>Tagname</span></a>

Colored

<span class="c-pill u-color-yellow-base"><span>New</span></span>
<span class="c-pill u-color-blue-lighter"><span>Updated</span></span>

Prefixed

<span class="c-pill u-color-blue-darkest"><span class="c-pill__prefix">#</span><span>Poppis</span></span>
<span class="c-pill u-color-turquoise-base"><span class="c-pill__prefix">.</span><span>Tickster</span></span>

Removable

<span class="c-pill c-pill--removable"><span>Tagname</span><a href="#" class="c-pill__button">Remove Tagname</a></span>
<span class="c-pill c-pill--removable u-color-grey-lighter"><span>Another, reeeeally reeeaaally long tag</span><button class="c-pill__button">Remove Another, reeeeally reeeaaally long tag</button></span>

Large

<span class="c-pill c-pill--large u-color-yellow-base"><span>New</span></span>
<span class="c-pill c-pill--large u-color-blue-lighter"><span>Updated</span></span>
<span class="c-pill c-pill--large u-color-blue-darkest"><span class="c-pill__prefix">#</span><span>Poppis</span></span>
<span class="c-pill c-pill--large u-color-turquoise-base"><span class="c-pill__prefix">.</span><span>Tickster</span></span>

Ghost

<span class="c-pill c-pill--ghost"><span>Tagname</span></span>
<span class="c-pill c-pill--ghost u-color-green-base"><span>Active</span></span>
<span class="c-pill c-pill--ghost u-color-blue-lighter"><span>Info</span></span>
<span class="c-pill c-pill--ghost u-color-red-base"><span>Error</span></span>

Accessibility notes

Not much here, just make sure you don't misuse the color classes in a way that contrasts could be a problem (e.g. grey pills on grey backgrounds).