Components

Button

<button type="submit" class="govuk-button">
  Save and continue
</button>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
element string Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text string Required. If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html string Required. If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name string Required. Name for the input or button. This has no effect on a elements.
type string Required. Type of input or buttonbutton, submit or reset. Defaults to submit. This has no effect on a elements.
value string Required. Value for the button tag. This has no effect on a or input elements.
disabled boolean Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href string The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes string Classes to add to the button component.
attributes object HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick boolean Prevent accidental double clicks on submit buttons from submitting forms multiple times
{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Save and continue"
}) }}

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.

There are 2 ways to use the button component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Start buttons

Use a start button as the main call to action on your service’s start page.

<a href="#" role="button" draggable="false" class="govuk-button govuk-button--start">
  Start now
</a>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
element string Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text string Required. If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html string Required. If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name string Required. Name for the input or button. This has no effect on a elements.
type string Required. Type of input or buttonbutton, submit or reset. Defaults to submit. This has no effect on a elements.
value string Required. Value for the button tag. This has no effect on a or input elements.
disabled boolean Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href string The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes string Classes to add to the button component.
attributes object HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick boolean Prevent accidental double clicks on submit buttons from submitting forms multiple times
{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Start now",
  href: "#",
  classes: "govuk-button--start"
}) }}

Disabled buttons

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.

<button type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled">
  Disabled button
</button>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
element string Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text string Required. If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html string Required. If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name string Required. Name for the input or button. This has no effect on a elements.
type string Required. Type of input or buttonbutton, submit or reset. Defaults to submit. This has no effect on a elements.
value string Required. Value for the button tag. This has no effect on a or input elements.
disabled boolean Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href string The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes string Classes to add to the button component.
attributes object HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick boolean Prevent accidental double clicks on submit buttons from submitting forms multiple times
{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Disabled button",
  disabled: true
}) }}

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.

<button type="submit" data-prevent-double-click="true" class="govuk-button">
  Confirm and send
</button>
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Primary options
Name Type Description
element string Whether to use an input, button or a element to create the button. In most cases you will not need to set this as it will be configured automatically if you use href or html.
text string Required. If html is set, this is not required. Text for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
html string Required. If text is set, this is not required. HTML for the button or link. If html is provided, the text argument will be ignored and element will be automatically set to button unless href is also set, or it has already been defined. This argument has no effect if element is set to input.
name string Required. Name for the input or button. This has no effect on a elements.
type string Required. Type of input or buttonbutton, submit or reset. Defaults to submit. This has no effect on a elements.
value string Required. Value for the button tag. This has no effect on a or input elements.
disabled boolean Whether the button should be disabled. For button and input elements, disabled and aria-disabled attributes will be set automatically.
href string The URL that the button should link to. If this is set, element will be automatically set to a if it has not already been defined.
classes string Classes to add to the button component.
attributes object HTML attributes (for example data attributes) to add to the button component.
preventDoubleClick boolean Prevent accidental double clicks on submit buttons from submitting forms multiple times
{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  text: "Confirm and send",
  preventDoubleClick: true
}) }}

This feature will prevent double clicks for users that have JavaScript enabled, however you should also think about the issue server-side to protect against attacks.

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 data-prevent-double-click.

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 govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Button’ on GitHub