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).

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>

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).