Buttons

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.

Primary buttons with icons

Primary buttons with icons inversed

Les boutons avec des icônes '--next', '--previous', '--back' et '--filter' ne seront pas inversés

Secondary buttons with icons

Secondary buttons with icons inversed

Les boutons avec des icônes '--next', '--previous', '--back' et '--filter' ne seront pas inversés

Tertiary shallow

This variant should be used with lists of links to avoid excessive white space and physical length of each list.

Tertiary shallow button list

This variant should be used with lists of links to avoid excessive white space and physical length of each list. See lists for more detail.

Transparent

Transparent buttons are for use as an alternative for primary buttons on dark accent colours. These can not be used with icons.

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.

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.

Sticky button

Make a button sticky at the bottom of the screen on mobile only.

Sticky button double

Make two buttons sticky at the bottom (left and right) of the screen on mobile only.

Notes for developers

Using disabled buttons

Do not rely solely on the is-disabled class to disable buttons (<button>), but rather explicitly provide the disabled attribute.

<button class="a-button is-disabled" type="submit" disabled>...</button>

The disabled attribute is not valid for anchor tags, so when using these as buttons, add the is-disabled class in conjunction with the aria-disabled="true" attribute to ensure that the inactive state of the button is clear visibly and also announced as such to screen readers.

<a class="a-button is-disabled" href="..." aria-disabled="true">...</a>

Visible labels and accessible names

When a button needs to be more descriptive of what it is or where it is going, but there is a requirement to show simplified text, then an extra span with the class u-hidden--visually is required within the a-button to hold the hidden text required to make the accessible name for the label meaningful to screen readers. The visible label should always come first, with the hidden text following on to extend this by adding meaning and context, for example:

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

This also helps to ensure that all buttons and links are unique through the page, rather than having multiple instances of links simply saying "Read more".

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="https://www.google.com" title="External site - www.google.com" rel="external">Google</a>

Accessibility testing

All Framework components have been accessibility tested, including being scanned using AXE. This component will cause rule violations using the standard AXE configuration (as would be seen if using their browser plugin), some of which may well be false positives; see our accessibility page for details on what rules have been excluded for this component and why.

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.

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.