Patterns

2.3.2

Buttons

<button class="btn">Default</button>

Buttons should be written using the <button> html tag. However, if a button is an <a> tag styled with the .btn class and has in-page functionality (such as toggling elements), the role attribute should be set to “button” and the tabindex attribute should be set to “0.” Refer to the best practices illustrated in the MDN documentation for the “button” role.

If the button is a <button> element and appears within a <form> tag, the type attribute should be explicitly set to submit, reset, or reset. By default (without the type attribute) <button> elements are set to the submit type.

<button class="btn color-primary-button">Submit</button>

Primary Button

The primary button should be used for in-page functionality and form submitting buttons. Use the .color-primary-button color combination to apply this style.

<a class="btn color-secondary-button">Go to Page</a>

Secondary Button

The secondary button should be used for calls-to-action and page links (not anchor links). Use the .color-secondary-button color combination to apply this style.

<button class="btn btn-large color-primary-button">Large Button</button>

Large Button

To use a large button add the .btn-large class to the .btn element.

<button class="btn btn-app color-primary-button">Default</button>

Application Button

Application buttons are ideal for progressive web applications. They have no hover state and a slight bevel. To use an application button add the .btn-app class to the .btn element.