Buttons

Overview

Buttons are a highly visual way to encourage a user to complete an action. The templates provide buttons pre-styled in several different colours and formats so that there is always a standard button you can use for your site.

When you should use buttons

Buttons are especially useful where:

• Pressing a button is required to complete a process. E.g. Submit a form or proceed to the next step
• You have one highly significant item you want to encourage users to click on a page (not multiple).

When you should avoid buttons

Buttons should not be used:

• To replace simple text links in a paragraph, or where there are many calls to action on a page...they only work when used sparingly.
• Where there are several items close together that need to be clicked on - eg. a list of forms. In this situation, a listing component should be used.

Primary button

Use the button class for a primary button.

Secondary button

Use the button--secondary class for a secondary button.

Tertiary button

Use the button--tertiary class for a tertiary button.

Inverted button

Use the button--inverted class for an inverted button.

Text button

Use the button--text class for a text button.

Disabled button

To disable a <button> use the disabled attribute.

To disable a button implemented with an anchor element, use the class disabled and attributes aria-disabled="true" and tabindex="-1".

Custom icons

When using an icon inside a button, the button's mandatory label replaces the icon's label; therefore, the latter can be omited. You should never use an icon on its own if you are not able to prove via user testing that is has no impact on usability.

Card buttons

White variation

Blue variation