Pill

Usage

See design usage guidelines

A Pill is a UI element which is similar to tags but are more rounded in shape. They can be used to highlight specific categories or statuses.

Default

Pill componentPill componentPill componentPill componentPill component

<span class="pill">Pill component</span>
<span class="pill success">Pill component</span>
<span class="pill error">Pill component</span>
<span class="pill warning">Pill component</span>
<span class="pill grey">Pill component</span>

Medium

Pill componentPill componentPill componentPill componentPill component

<span class="pill pill-medium">Pill component</span>
<span class="pill success pill-medium">Pill component</span>
<span class="pill error pill-medium">Pill component</span>
<span class="pill warning pill-medium">Pill component</span>
<span class="pill grey pill-medium">Pill component</span>

Large

Pill componentPill componentPill componentPill componentPill component

<span class="pill pill-large">Pill component</span>
<span class="pill success pill-large">Pill component</span>
<span class="pill error pill-large">Pill component</span>
<span class="pill warning pill-large">Pill component</span>
<span class="pill grey pill-large">Pill component</span>

Extra Large

Pill componentPill componentPill componentPill componentPill component

    <span class="pill pill-extra-large">Pill component</span>
    <span class="pill success pill-extra-large">Pill component</span>
    <span class="pill error pill-extra-large">Pill component</span>
    <span class="pill warning pill-extra-large">Pill component</span>
    <span class="pill grey pill-extra-large">Pill component</span>

Usage Guidelines