Buttons

Buttons should be used to imply specific actions on a web page and may be created using a variety of sizes, types and variations. Things to consider:

Each button should contain a label and/or icon.
When creating a button label, try to describe the action in as few of words as possible.
Use title case, but avoid full sentences, and where applicable, try to begin each label with a verb. (i.e. Submit a Claim, Get a Quote).
Additionally, ensure that the label fits on a single line, from mobile to desktop.

Adding a Button to the Page

A button may be implemented in one of two ways—using the <a> or <button> tags.

When linking to another page, please use the <a> element.

<a href="gohere.html" class="button">button name</a>

But, if your button is triggering an action on the page, such as submitting a form or starting a JavaScript event, then use the <button> element.

<button type="submit" class="button">button name</button>

Each button may also contain the following three classes...

.button (required)

.button--*type (to correctly style the button) *Not adding this class will result in the default button type.

.button--*size (to apply the appropriate button size) *Not adding this class will result in the default button size.

...and should be constructed as shown:

<button class="button [button--type] [button--size]"></button>

For more information on available button types and sizing, refer to the examples below.

Button Types

There are five different button types.

Primary (no class needed), our standard button. Used for the most important call-to-action(s) on a web page or interactive.
Secondary (.button--secondary), signifies lower importance, especially when grouped together with a primary button.
Warning (.button--warning), used to show an alert of caution status (i.e. a bill that's past due).
Disabled (.button--disabled), used to show a disabled button state.
Link (.button--link), commonly used for button groups and page actions with lower importance.

Link

Button Sizes

We have three different button sizes available to use.

Small (.button--small), for use with <small> copy.
Default (no class needed), the standard button for body copy.
Large (.button--large), typically used for page actions, such as submitting a form or progressing through an interactive.

Button States

Additional button states should be styled as follows:

Default, the default button state.
Disabled, used to display an inactive button.
Hover, used to signify a hover, click or touch.
Visited, matches the current active state.
Focus, represented by a 2 px stroke and drop shadow, the focus is used to show that the button is the currently selected element.

Block Level Buttons

Adding the button-block class allows a button to span the width of its parent, which can be useful for narrow containers or pairing two equally-sized buttons together.

Button Groups

Related buttons may be grouped together to show association and/or hierarchy. Ideally, button groups should be displayed inline and fit without wrapping on a mobile device.

Button groups can be used for forms...

Cancel

... or as a list of grouped links.

Link 1 Link 2 Link 3 Link 4

... or a group of actions

In certain cases, such as designing an interactive, it may be necessary to group two or three ‘pill’ buttons together. In this situation, it is important for the button group to contain block level buttons. This will ensure no single button has visual dominance.

Note that when grouping pill buttons together, you need to include at least one primary button type.

One Two Three or more

Dropdown Buttons

A dropdown button displays a menu or popover when pressed.

js-button-dropdown-container - wraps the entire button dropdown element.
js-button-dropdown - the button that will become the dropdown trigger.
data-value="input-value-name" - goes on the individual <a> tags inside the dropdown list. This determines what the new hidden input value will be after you select an item from the list.

Split Buttons

Split buttons are essentially a half-pill, joined together with another atom. This could be as simple as two pills side-by-side, or more complex as shown in the examples below.

Note: When joining two buttons together, you will need to apply the block level class to imply equal visual dominance. You will also need to include at least one primary button type.

Split buttons may also be joined together with a field. This is commonly used for our search molecule.

Note: When using a split button with an input, you will need to wrap the elements inside an .input-group in order to achieve the inline visual effect. You can read more about input groups on the Form Basics page.

Icon Buttons

An icon may be used to help clarify the intended action. It can be used as an individual button, or joined together with a label. When used with a label, the icon may be aligned to the left or right, depending on use. You can add any one of our font icons by applying the required classes:

<button class="button">Button Name <i class="icon icon-[icon name]"></i></button>