Button

Buttons allow the user to move through a task by triggering single actions. The container gives the button visual impact and the text label communicates a clear purpose. Optionally, all button variants may include an <icon> to the left of the label.

Buttons classes are designed for <button> elements and <input>elements with attribute type=button. These classes can also be used to style <a>, however best practice is to avoid using links as buttons for semantic purposes.

Variants

Primary Button

Used for the primary actions in a layout, these buttons drive a task forward. One primary button is used on a given pattern but multiple primary buttons may be used on a page that offers the user different interactions.

<button class="c-button--primary">Button Text</button>

Copy

Secondary Button

Used for any alternate actions in a layout, this button lets the user know what they can do instead of moving forward in a task. Multiple secondary buttons can appear in a single screen.

<button class="c-button">Button Text</button>

Copy

Small Button

Primary and secondary buttons may use an equivalent small button when there are space constraints to consider or when the action should be given less visual prominence. On mobile, small buttons should always be used instead of primary and secondary buttons.


  //Small Primary Button
    <button class=c-button-small--primary>Button Text</button>
  //Small Secondary Button
    <button class=c-button-small>Button Text</button>

Copy

States

Primary, secondary and small buttons each have a default, hover/active and focus state. In addition, a disabled state is available.

Disabled Button

Used for an unavailable action, this state signals that the user must complete another action first. Only use when a triggering action, such as choosing between two options shown on screen, must be completed before the button’s action becomes available.

<button class="c-button--disabled">Button Text</button>

Copy

Design Environment

The primary button should have prominence in a layout, either above or to the right of all other buttons.

Primary and secondary buttons have a minimum width of 100px. If this width cannot be accommodated, use small buttons instead. In mobile environments, single buttons, including small buttons, will automatically fill the full width of the screen. In tablet and desktop environments, buttons will fill 100% of their containing element.