Buttons and styled links
When to use
Use a button or styled link to enable a user to interact with the page. Our buttons and styled links look the same but use different code.
We use buttons and styled links in different situations to help users of assistive technology understand what’s on a page and what will happen if the button or styled link is used.
The styling on buttons and styled links makes them more prominent and helps the user know what to do next.
Buttons
Use a button where an action is performed on the current page or data is submitted, such as:
submit a form
find address
save and continue
delete account
Styled links
Use a styled link to allow users to navigate to a different page or to another part of the same page and where no data is submitted. For example:
start a form
move within a form
download a document
Buttons
Buttons use the <button> tag. When using a button, you should set the type attribute for the button element to tell browsers what type of button it is. For example:
<button class="button primary" type="submit">Submit</button>
Primary
Use a primary button for the main call to action on a page, such as ‘Submit’. Try to avoid using multiple primary buttons on a single page as this reduces their impact and makes it harder for a user to know what to do next.
Disabled
Use a disabled button when a primary button is in a disabled state. Disabled buttons show the user that an action is possible but not available at that moment.
Disabled buttons can confuse users, avoid them if possible. Only use them if there’s a known reason it will help a user. For example, when a user presses the submit button and their files are still uploading.
How it works
The button has a built-in disabled attribute with an id assigned to it. This can be dynamically updated as needed, toggling the button between its enabled and disabled states. Use the JavaScript provided to specify the id and insert the appropriate user feedback message, such as 'Your files are uploading'.
Secondary
Use a secondary button for an important action, such as ‘Find address’. Secondary buttons are 40px high by default. If used next to an input field, they take on the height of the input field.
With icon
An icon can be added to a secondary button to help a user understand the function, such as ‘Search’. Icons are available from IcoMoon.
Borderless
Use a secondary borderless button for a less important or less often used action, such as ‘Clear all’ on finder filters.
Styled links
Styled links use the <a> tag. When using a styled link you should set the role attribute to tell browsers its role. For example:
<a class="button primary" href="#_" role="button">Link</a>
Primary
Use a primary styled link for the main call to action on a page, such as, ‘Next’, ‘Download’ or to link to a different website or page. Try to avoid using multiple primary styled links on a single page as this reduces their impact and makes it harder for a user to know what to do next.
If you have two calls to action with the same priority, you can use two primary styled links next to each other.
Primary styled links should always have an icon, to help users understand their function. Icons are available from IcoMoon.
With help text
Use help text below a primary styled link to add information that might be useful to the user, such as the name of the website when linking to an external site.
Group with help text
If you need to have two primary styled links with help text next to each other, you can’t just use 2 styled links. Instead use the code below:
With alternative link
Use a primary styled link with alternative link when you need to put an alternative call to action near to a primary call to action, such as “Sign in” and “Create an account”
Borderless
Use a primary borderless styled link for a less often used, alternative primary action. For example, ‘Back’ which is coupled with ‘Next’ in the Pagination pattern.
Disabled
Use a disabled styled link when a primary styled link is in a disabled state. Disabled styled links show the user that an action is possible but not available at that moment.
Disabled styled links can confuse users, avoid them if possible. Only use them if there’s a known reason it will help a user. For example, when a user presses next and the form makes a call to a back-end system. If possible, add guidance text to explain what's happening to the user. Once the action is complete, the disabled state must disappear.
How it works
The styled link has a built-in disabled attribute with an id assigned to it. This can be dynamically updated as needed, toggling the button between its enabled and disabled states. Use the JavaScript provided to specify the id and insert the appropriate user feedback message, such as 'Finding your collection dates'.
Secondary
Use a secondary styled link for an important action that isn’t the primary call to action, such as a link to a feedback form.
With icon
An icon can be added to a secondary styled link to help a user understand the function, such as ‘Download’. Icons are available from IcoMoon.
Button tags
When implementing a primary or secondary button use different values in the html so that the type attribute for a button element tells browsers what type of button it is.