Buttons

Clicky clicky! Buttons can be made out of input, button, and a elements.

Default

Submit 

<input type="button" value="Submit" class="button">
<a href="#" class="button">Submit</a>
<button type="button" class="button">Submit</button>

Outline Button

Submit 

<input type="button" value="Submit" class="button button--outline">
<a href="#" class="button button--outline">Submit</a>
<button type="button" class="button button--outline">Submit</button>

Link Button

Submit 

<input type="button" value="Submit" class="button button--link">
<a href="#" class="button button--link">Submit</a>
<button type="button" class="button button--link">Submit</button>

Expanded Button

<input type="button" value="Submit" class="button button--expand">

Arrow Button

<button type="button" class="button button--arrow">Submit <i class="fas"></i></button>

Buttons with Icons

<button type="button" class="button button--icon"><i class="fas fa-fw fa-arrow-right button--icon__before"></i>Submit</button>
<button type="button" class="button button--icon">Submit<i class="fas fa-fw fa-arrow-right button--icon__after"></i></button>

Other Sizes

X-Large 

<input type="button" value="X-Large" class="button button--xl">
<a href="#" class="button button--xl">X-Large</a>
<button type="button" class="button button--xl">X-Large</button>

Large 

<input type="button" value="Large" class="button button--lg">
<a href="#" class="button button--lg">Large</a>
<button type="button" class="button button--lg">Large</button>

Small 

<input type="button" value="Small" class="button button--sm">
<a href="#" class="button button--sm">Small</a>
<button type="button" class="button button--sm">Small</button>

X-Small 

<input type="button" value="X-Small" class="button button--xs">
<a href="#" class="button button--xs">X-Small</a>
<button type="button" class="button button--xs">X-Small</button>

Disabled

Disabled 

<input type="button" value="Disabled" class="button button--disabled js-button--disabled">
<a href="#" class="button button--disabled js-button--disabled">Disabled</a>
<button type="button" class="button button--disabled js-button--disabled">Disabled</button>

Button Groups

A collection of similar or like-minded buttons. They can be different sizes. Buttons can also indicate the currently selected option. 


<div class="button-group">
    <input type="button" value="Primary Action" class="button">
    <input type="button" value="Secondary Action" class="button button--selected">
    <input type="button" value="Secondary Action" class="button">
</div>


<div class="button-group button-group--xl">
    <input type="button" value="Primary Action" class="button button--selected">
    <input type="button" value="Secondary Action" class="button">
    <input type="button" value="Secondary Action" class="button">
</div>

Class Reference

Class Info
button Creates a new button. Can be added to an a, button, or input.
button--xs Creates an extra small button.
button--sm Creates a small button.
button--lg Creates a large button.
button--xl Creates an extra large button.
button--disabled Applies disabled styling to a button.
button--expand Makes a button expand to the width of its container.
button--link Makes a button look like a normal text link.
button--icon Indicates the button contains an icon.
button--selected Applies selected styling to a button. Can be used to denote which button in a bar or group is currently selected.
button-group Creates a new button group. Should be added to a div.
button-group--xs Creates an extra small button.
button-group--sm Creates a small button.
button-group--lg Creates a large button.
button-group--xl Creates an extra large button.