Button

Guidelines

Buttons always have the .btn class, with an additional class for a skin such as .btn--primary.
Button classes can be used on any HTML element (i.e. it works on both a button and a).

The majority of the buttons on our apps are either primary or secondary buttons. There should usually only be one primary button per page. Tertiary buttons are meant to be used alongside other primary or secondary buttons (not by themselves).

<button class="btn btn--primary">Primary</button>
<button class="btn btn--secondary">Secondary</button>
<button class="btn btn--tertiary">Tertiary</button>

Other Skins

We use white buttons on top of some dark backgrounds and semi-transparent buttons over images.

<button class="btn btn--white">White</button>
<button class="btn btn--semi-trans">Semi-transparent</button>

Icons

Buttons that have just an icon inside use a .i-lg icon and need a third class .btn--icon along with .btn and a skin.

<button class="btn btn--outline inline-flex align-items-center mr1"><i class="i i-download mr1"></i>Download</button>
<button class="btn btn--icon btn--outline"><i class="i i-settings i-lg"></i></button>

Disabled State

disabled buttons automatically receive this styling.

<button class="btn btn--default" disabled="disabled">Disabled</button>

Sizes

Use .btn--sm for small buttons and .sm:btn--block for buttons that turn into full width on mobile.

<button class="btn btn--outline sm:btn--block mr1">Block on mobile</button>
<button class="btn btn--outline mr1">Default</button>
<button class="btn btn--outline btn--sm">Small</button>

Button Groups

We try to use button groups whenever there is a line of three or more buttons in a row. Wrap a series of buttons with .btn in .btn-group with .clearfix. The currently-selected button must have the class .bg--gray-200 (see the "Left" example below).

<div class="btn-group clearfix">
    <button class="btn btn--outline bg--gray-200">Left</button>
    <button class="btn btn--outline">Middle</button>
    <button class="btn btn--outline">Right</button>
</div>