Buttons

Base Button

Use this component when the button should trigger a change to the current page. For example, a hamburger menu and FAQ element all result in clickable actions and should use the button tag.

Requirements

  • Receive focus by default
_cmp.button.scss
button.js 
<button class="cmp-button">Button Text</button>

Use this component when a user is navigating to a separate page. For example, a button within a CTA element that takes the user to the contact page should use the a tag.

Requirements

  • Receive focus by default
_cmp.button.scss
Button Text 
<a class="cmp-button" href="#">Button Text</a>

Enhancements

  • When taking the user to an external site, use an aria-label to indicate that to the user
Button Text 
<a class="cmp-button" href="#"  aria-label="Button Text external link">Button Text</a>

Toggle Button

Use this component when the button should trigger a state change. For example, a switch between light and dark mode. While it may be tempting to use a checkbox, it may not be the most semantic solution. Checkboxes relate to collecting information, as in a form.

Requirements

  • Receive focus by default
  • Voice Over announces the correct state

Notes

  • Voice Over Safari announces this as a checkbox
_cmp.toggle-button.scss
toggle-button.js 
<button class="cmp-button cmp-button--toggle" aria-pressed="false">Toggle</button>