Buttons

Buttons are useful to draw attention to a goal or action. Calls to actions within buttons should be explicit.

Color

<!-- The .mv-2x class is used for presentation only -->
<button class="btn--primary">Primary</button>
<button class="btn--tertiary mv-2x">Tertiary</button>
<button class="btn--dangerous">Dangerous</button>

Description

Primary: The default action of the page or view. This represents the most important actions on the page. Tertiary: The secondary action of the page. Dangerous: When a customer attempts a potentially destructive action we use red to warn them of the potential risk involved with completing such an action.

Do

  • Limit the number of primary buttons per page
  • Use primary and tertiary buttons together
  • Keep content within buttons clear, concise, and actionable

Don't

  • Use primary and destructive buttons together

Style

<button class="btn--link">Button Link</button>

Description

Buttons should elicit an action. We use this style to make the button appear as a link which is especially useful next to text or within confined spaces. If the action links to another page or part of the app please see text link.

<button class="btn--inverse">Button Inverse</button>

Description

This style of button is used as a toggle to select one or more options. Button Inverse should always have a .input--hidden:checked + .btn--inverse applied to one of the options.

Do

  • Include an input:checked with button inverse

Don't

  • Use other colors for button link

Size

<button class="btn--primary btn--inline">Default Size</button>
<button class="btn--tertiary btn--inline">Default Size</button>

Description

All buttons are this size by default .btn--inline added to place buttons next to each other.

<button class="btn--primary btn--compact btn--inline">Compact Size</button>
<button class="btn--tertiary btn--compact btn--inline">Compact Size</button>

Description

Compact: When there is a need to conserve space we use the compact button .btn--inline added to place buttons next to each other.

Do

  • Group like-sized buttons

Don't

  • Put default buttons next to compact buttons

Icon

<button class="btn--tertiary btn--locked" aria-label="locked feature">
  Button Lock
  <svg class="icon btn__icon" role="presentation">
    <use xlink:href="#icon-lock"></use>
  </svg>
</button>

Description

Some flows and features are unavailable to customers based on pricing and packaging. We use a lock icon to visibly communicate that they cannot access this feature or flow.

Do

  • Ensure buttons with locks are clickable
  • Place locks after a string of text.
  • Include the .disabled class to locks that are disabled.
  • Only show locks when the feature or flow relevant to the user is blocked.

Don't

  • Add lock icons without context
  • Add more than one lock to a button
<div class="drop-menu">
  <button class="btn--tertiary" type="button" aria-haspopup="true">
    <span class="dropdown__trigger">Button Drop</span>
  </button>
</div>

Description

Drop menu buttons have a caret icon and on click reveal a list of items. This pattern is used to house multiple actions that a customer can take.

<button type="button" class="btn--icon-only">
  <svg class="icon" role="presentation">
    <use xlink:href="#icon-search"></use>
  </svg>
  <span class="sr-only">Screen Reader text</span>
</button>
<button type="button" class="btn--icon-square">
  <svg class="icon" role="presentation">
    <use xlink:href="#icon-search"></use>
  </svg>
  <span class="sr-only">Screen Reader text</span>
</button>

Description

Some buttons use only icons to convey actions. This is used for commonly known actions like search.

Poster Play

<a href="#"
  class="poster-play"
  style="background-image: url(https://placekitten.com/200/300)"
  aria-label="play video">
  <span class="poster-play__button btn--secondary btn--compact">
    <svg class="icon icon--small" role="presentation">
      <use xlink:href="#icon-play"></use>
    </svg>
    <span class="ml-2x">8:00</span>
  </span>
</a>

Description

We use play icons on buttons for videos. Sometimes they can be standalone and sometimes they appear on video poster images.

Do

  • Ensure the action of the button matches the icon of the button
  • Use button locks when a feature or flow is blocked and always provide context

Don't

  • Hide primary actions in a dropdown, when possible
  • Use icons for complex actions

Alignment

<button type="button" class="btn--tertiary btn--inline">Button Inline</button>

Description

When a button needs to be inline with the content.

Center

<button type="button" class="btn--tertiary btn--centered">Button Center</button>

Description

When a button needs to be centered on the page or in the given container.

Group

<div class="btn-group">
  <button type="button" class="btn--tertiary mr-2x">Cancel</button>
  <button type="submit" class="btn--primary">Submit</button>
</div>

Description

When two or more buttons need to be next to each other. Commonly used in modals.

Do

  • Have clear actions for grouped buttons

Don't

  • Use three or more buttons in a group without a good reason

Accessibility

  • Receives :focus
  • Buttons without content or a name should have aria-label such as icons.