Buttons

HELP US WITH CONSISTENCY. PLEASE CONSULT UX BEFORE USE.

NOTE: Button classes have been updated for August 2017 release for ease of extending the classes. Please read carefully. Click on a button to see recommended markup.

Class Attribute Order

The order of the classes as defined in the class attribute should be as follows: Style, Size, Width, Icon, JavaScript Related Class. JavaScript Related Class must be prefixed with js-

EXAMPLE HTML

<input class=""btn btn-recommended btn-large btn-wide-full btn-icon-right js-related-class" type="button" name="" value="Example Button Class Order" />

Button Styles

Button elements must have class btn btn-style as noted below.

Default Button

HTML

<input type="button" class="btn btn-default" value="btn btn-default" />

Recommended Button

btn btn-recommended

EXAMPLE HTML

<input type="button" name="" class="btn btn-recommended btn-large" value="btn btn-recommended btn-large" />

EXAMPLE HTML

<input type="button" class="btn btn-recommended" />

EXAMPLE HTML

<input type="submit" name="" class="btn btn-recommended btn-large" value="btn btn-recommended btn-large" />

CTA (Call to Action) Button

btn btn-cta

EXAMPLE HTML

<input type="button" name="" class="btn btn-cta btn-smally" value="btn btn-cta btn-small" />

EXAMPLE HTML

<input type="button" class="btn btn-cta" />

EXAMPLE HTML

<input type="submit" name="" class="btn btn-cta btn-large" value="btn btn-cta btn-large" />

Update Button

btn btn-update

EXAMPLE HTML

<input type="button" name="" class="btn btn-update btn-small" value="btn btn-update btn-small" />

EXAMPLE HTML

<input type="button" class="btn btn-update" />

EXAMPLE HTML

<input type="submit" name="" class="btn-large btn-less-primary" value="Large" />

Simple Buttons

These look like links but occupy the same space as a button.

HTML

<input type="button" name="" class="btn btn-simple" value="btn btn-simple" />

Secondary Buttons

btn btn-secondary

HTML

<input type="button" name="" class="btn btn-secondary btn-small"value="btn btn-secondary btn-small"/>

HTML

<input type="button" class="btn btn-secondary" />

HTML

<input type="button" name="" class="btn btn-secondary btn-large" value="btn btn-secondary btn-large" />

Secondary Inverse Buttons

When a secondary button is needed on a solid background, use this button style.

btn btn-secondary-inverse

HTML

<input type="button" name="" class="btn btn-secondary-inverse btn-small" value="btn btn-secondary-inverse btn-small" />

HTML

<input type="button" class="btn btn-secondary-inverse" />

HTML

<input type="button" name="" class="btn-large btn-secondary btn-inverse" value="Large" />

Button Sizes

The default button does not need an additional class declaring its size.

btn btn-default

HTML

<input class="btn btn-default btn-small" type="button" value="btn btn-default btn-small" />

HTML

<a href="javascript:void(0)" class="btn btn-default">btn btn-default</a>

HTML

<input class="btn btn-default btn-large type="submit" value="btn btn-default btn-large" />

Button Widths

Wide Fixed

PLEASE CONSULT UX REGARDING USE. The button is 100% wide and has a max width of 300px.

btn btn-default btn-wide-fixed

EXAMPLE HTML

<input type="button" name="" class="btn btn-default btn-small btn-wide-fixed" value="Default" />

EXAMPLE HTML

<input type="button" class="btn btn-default btn-wide-fixed" />

EXAMPLE HTML

<input type="submit" name="" class="btn btn-default btn-large btn-wide-fixed" value="btn btn-default btn-large btn-wide-fixed" />

Wide Full

The button is 100% wide.

btn btn-default btn-wide-full

EXAMPLE HTML

<input type="button" name="" class="btn-wide-full" value="Default" />

EXAMPLE HTML

<input type="button" class="btn btn-default btn-wide-full" />

EXAMPLE HTML

<input type="submit" name="" class="btn btn-default btn-large btn-wide-full" value="btn btn-default btn-large btn-wide-full" />