Buttons: Advanced

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" />

Buttons with Icons

Left Button

Right Button

Add Button

Minus Button

Delete Button

Check Button

Edit Button

Refresh Button

Replay Button

Play Button

Download Button

Upload Button

Calculator Button

File Search Dollar Button

Print Button

Email Button

New Folder Button

Grid Button

Clock Button

Audio Button

Exceptions

Provider Search Button

For Default button style only.

Provider Website → Provider Website → Provider Website →

Copy Button

Requires specific markup.

Share Button

Works on button or anchor only. Requires specific markup.

Expand/Collapse Buttons

Reset Button

Technically not a button, but it's here for now for documentation purposes.

Select Plan Button on Plan Compare

Enrollment specific. Please consult with UX regarding use.

Enrollment Back Button

Enrollment specific. Works with anchor or button only and is darker because it's on a gray background. Requires specific markup. When inside the Plan Header, color is inversed (changes to white).

Back

Favorite Checkbox/Button

Requires specific markup. Works as container for label + input for checkbox. To disable the favorite button, disable the input element.

Favorite

Reverse Button

Requires specific markup.

Add Reverse