Pill Button

Pill Buttons allow users to take significant action–submit a form, follow a user, create a record etc.

Pill button

Occasionally, if an action is more significant, essential or impactful, one of three pronounced buttons can be used.

<button class="PillButton" type="button">Button</button>

Colors

You can specify one of 12 color variations. A coloured PillButton does not hold any semantic value and should be chosen to support your brand.

<button class="PillButton red" type="button">Red</button>
<button class="PillButton pink" type="button">Pink</button>
<button class="PillButton purple" type="button">Purple</button>
<button class="PillButton violet" type="button">Violet</button>
<button class="PillButton indigo" type="button">Indigo</button>
<button class="PillButton blue" type="button">Blue</button>
<button class="PillButton teal" type="button">Teal</button>
<button class="PillButton green" type="button">Green</button>
<button class="PillButton lime" type="button">Lime</button>
<button class="PillButton yellow" type="button">Yellow</button>
<button class="PillButton amber" type="button">Amber</button>
<button class="PillButton orange" type="button">Orange</button>

There are also grayscale and metallic color variations.

<button class="PillButton black" type="button">Black</button>
<button class="PillButton white" type="button">White</button>
<button class="PillButton gold" type="button">Gold</button>
<button class="PillButton bronze" type="button">Bronze</button>

There are also social media color variations.

<button class="PillButton twitter" type="button">Twitter</button>
<button class="PillButton facebook" type="button">Facebook</button>

Sizes

There are two sizes available by adding a size1 or size2 class. Size 1 is the default.

<button class="PillButton blue" type="button">Size 1</button>
<button class="PillButton blue size2" type="button">Size 2</button>

Button with data

You can add an icon to support the PillButton text and provide visual reinforcement. For best results, we recommend Feather icons. The icon is wrapped in a div to provide the necessary margin.

<button class="PillButton" type="button">
    <div class="mr-1">
        <svg class="Icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
        </svg>
    </div>
    Log in with twitter
</button>

Or you can put an icon on the right.

<button class="PillButton blue" type="button">
    More
    <div class="ml-1">
        <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
    </div>
</button>

If an icon is sufficient on its own, you can remove the button text.

<button class="PillButton blue" type="button">
            <svg class="Icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            </button>

Active state

An active state, which can be applied by adding an is-active class. Example use cases might include when a PillButton is currently performing an action or waiting for data to load.

<button class="PillButton is-active">Loading...</button>

Disabled state

If an action is usually possible but is currently disallowed for some reason, you can apply a disabled state using the is-disabled class. As shown below, different markup is required depending on the html tag.