Button

Buttons allow the user to move through a task by triggering single actions. Button classes are designed for <button> elements and <input type="button"> elements. These classes can also style <a> elements as buttons, but best practice is to refrain from using links as buttons for semantic purposes.

Variants

Primary Button

Used for the primary action in a layout, this button drives the user forward in a task. Only use one primary button per screen.

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

Copy

Default 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. Only use when a primary button is also present. Multiple default buttons can appear in a single screen.

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

Copy

Subtle Button

Used instead of the default button, this button achieves a cleaner layout. Only use when a primary button is also present. Multiple subtle buttons can appear in a single screen.

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

Copy

States

Every button variant has hover/active and focus pseudo-classes. Optional classes for disabled and loading are available.

Disabled Button

Use the class c-button--disabled for an unavailable action. Only use when a triggering action must be completed before the button’s action becomes available. You may also disable a button without changing its style by adding a disabled attribute with the value 'disabled'.

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

Copy

Use the class c-button–-loading when making longer calls to backend services which result in a noticeable wait time.

<button class="c-button-loading">
  <span class="c-button-loading__item-1" />
  <span class="c-button-loading__item-2" />
  <span class="c-button-loading__item-3" />
</button>

<button class="c-button--primary-loading">
  <span class="c-button--primary-loading__item-1" />
  <span class="c-button--primary-loading__item-2" />
  <span class="c-button--primary-loading__item-3" />
</button>

<button class="c-button--subtle-loading">
  <span class="c-button--subtle-loading__item-1" />
  <span class="c-button--subtle-loading__item-2" />
  <span class="c-button--subtle-loading__item-3" />
</button>

Copy

Design Environment

Primary buttons will always take prominent placement to the right of or on top of other buttons. Inline buttons should follow the Dual Inline Action Group pattern. Use the following layout classes to keep space between horizontally stacked buttons:

.l-margin-top--xlarge between a primary button and any component above it
.l-margin-top--xsmall between a primary button and any button below it

Stacked Single Buttons

<button class="c-button--primary l-margin-top--xlarge">Button Text</button>
<button class="c-button l-margin-top--xsmall">Button Text</button>

Copy