Buttons

Buttons are used to initiate an action or for navigation.

• Keep labels simple and short – no more than two or three words long and clearly describing the action or destination.
• Additional invisible text can be included to ensure the accessibility of the link.
• All buttons other than the transparent button are built to work on light and dark accent colours.
• All buttons have a minimum height of 55px and a minimum width of 100px to ensure a sensible clickable / tappable size.
• Primary buttons should be the most visually prominent element on the page.
• Transparent buttons are for use over areas of strong colour, eg. promotional modals.
• Icon buttons can be used to highlight certain actions such as download etc.
• Print buttons should only be used when linking to a page that is specifically designed for printing, or if being added via JavaScript to print the current page.
• Full width buttons should be used where a button must display the full width of its container.
• Next and back buttons should be centralised where space allows.
• Buttons display at full width in mobile views.
• See style guide for colour and typography rules.

• Icons should not be used on transparent buttons on accent colours.
• Avoid using multiple instances of primary buttons on the same page; instead use secondary button styles, links, chevrons or imagery to differentiate calls to action.
• Anchors must not open in a new window, eg. target="_blank", unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.

Examples

Primary

The primary button should be the most visually prominent element on the page. If possible, avoid using multiple instances of primary buttons on the same page; instead use secondary button styles, links, chevrons or imagery to differentiate calls to action.

Secondary

Secondary buttons with icons

These icons must only be used with secondary or tertiary buttons. They must NOT be used with primary or transparent buttons on accent colours.

Tertiary

Tertiary buttons are designed to look like a standard text link but provide a larger than standard hit target.

Transparent

For use over area of strong colour, eg. promotional modal.

Form

ONLY to be used when placing a primary or secondary button next to a form element. The reduced height of these buttons means they align with form elements perfectly unlike other button variants.

Print

Only to be used when linking to a page that is specifically designed for printing, or if being added via javascript to print the current page. Icon buttons should NOT be used on transparent buttons on accent colours.

Watch video

Icon buttons should NOT be used on transparent buttons on accent colours.

Live-chat

Icon buttons should NOT be used on transparent buttons on accent colours.

Disabled

Full width button

Make a button display full width of its container.

Button group

Group of buttons on one line.

Button group of three (first button feature)

Group of buttons three on one line, with the first button being a featured primary button; at small screen sizes, the two secondary buttons stay side-by-side under the primary button.

Next and previous button group

Next and back buttons which are centralised on screen when on large enough screens.

Notes for developers

When a button needs to be more descriptive of what or where it is going, but there is a requirement to show simplified text, the additional text can be hidden visually, for example:

<a class="a-button" href="...">Find out more<span class="u-hidden--visually"> about car insurance</span></a>

Important:As additional markup is required for styling inputs, please use standard buttons unless absolutely necessary.

Using a disabled button

Do not rely solely on styling for disabled buttons (<button>, <input type="button" /> or <input type="submit" />): explicitly provide the disabled="disabled" attribute.

<input type="submit" value="..." disabled />

Read more about national conventions for writing telephone numbers.

Links to external websites

If a link is taking the user to an external website, ensure that it is clear that it will do so by making the title attribute descriptive of what it will do and where it will go, for example:

<a href="http://www.google.com" title="External site - www.google.com" rel="external">Google</a>

Anchors must not open in a new window, eg. target="_blank", unless it would disrupt a users journey such as when within a large form. Read more about opening links in new windows.

Notes for testers

• Ensure that buttons can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the buttons are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a button, the style changes noticeably.
• Ensure that when a button has focus, the style changes noticeably.
• Ensure that text within buttons is descriptive of what or where the button is going. Additional text descriptive text can be hidden visually from the user to aid to help make the button understandable, especially if there area number of links / buttons such as "Find out more" on the page which go to different locations.
• Ensure that all buttons are device agnostic and do not specify how a user should be interacting with a button, eg. click.

Code Examples

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Keyboard operations

TAB

Tabbing to an anchor should make the button clearly visually different so that the focus point on the page is obvious to the user.

SPACE or ENTER

With focus on a button, pressing SPACE or ENTER will open the link if a link or perform the form action. If the link is internal to the page it will scroll the page otherwise it will load the new page.