When to use this component
Use the button component to help users carry out an action on a GOV.UK page like starting an application or saving their information.
How it works
Write button text in sentence case, describing the action it performs. For example:
- ‘Start now’ at the start of the service
- ‘Sign in’ to an account a user has already created
- ‘Continue’ when the service does not save a user’s information
- ‘Save and continue’ when the service does save a user’s information
- ‘Save and come back later’ when a user can save their information and come back later
- ‘Add another’ to add another item to a list or group
- ‘Pay’ to make a payment
- ‘Confirm and send’ on a check answers page that does not have any legal content a user must agree to
- ‘Accept and send’ on a check answers page that has legal content a user must agree to
- ‘Sign out’ when a user is signed in to an account
You may need to include more or different words to better describe the action. For example, ‘Add another address’ and ‘Accept and claim a tax refund’.
Align the primary action button to the left edge of your form.
Use a start button as the main call to action on your service’s start page.
Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
Only use disabled buttons if research shows it makes the user interface easier to understand.
Stop users from accidentally sending information more than once
Sometimes, users double click buttons because they:
- have used operating systems where they have to double click items to make them work
- are experiencing a slow connection which means they are not given feedback on their action quickly enough
- have motor impairments such as hand tremors which cause them to click the button involuntarily
In some cases, this can mean their information is sent twice.
For example, the GOV.UK Notify team discovered that a number of users were receiving invitations twice, because the person sending them was double clicking the “send” button.
If you are working in production and research shows that users are frequently sending information twice, you can configure the button to ignore the second click.
To do this, set the
data-prevent-double-click attribute to
true. You can do this directly in the HTML or, if you’re using Nunjucks, you can use the Nunjucks macro as shown in this example.
In the case of slow connections, aim to give the user information about what’s happening, for example, by showing a loading spinner or a modal, before using
Research on this component
If you’ve used this component, get in touch to share your user research findings.
Get in touch
If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on email@example.com