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
To disable a <button> use the disabled attribute.
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.
Link button
Buttons can also use an <a> tag.
To disable a button implemented with an anchor element, use the class disabled and attributes aria-disabled="true" and tabindex="-1".
Arrow buttons
Use the with-arrow class for an arrow button.
Icon buttons
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.
Hero buttons
Use the button-hero-inverse class for an inverse hero button.