Button

<button
  data-module="govuk-button"
  class="govuk-button"
>
  Save and continue
</button>

<Button>Save and continue</Button>

When to use this component

Use the button component to help users carry out an action 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.

Default buttons

Use a default button for the main call to action on a page.

Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

<button
  data-module="govuk-button"
  class="govuk-button"
>
  Save and continue
</button>

<Button>Save and continue</Button>

Start buttons

Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.

<a
  data-module="govuk-button"
  draggable="false"
  role="button"
  class="govuk-button govuk-button--active govuk-button--start"
  href="#"
>
  Start now
  <svg
    class="govuk-button__start-icon"
    xmlns="http://www.w3.org/2000/svg"
    width="17.5"
    height="19"
    viewBox="0 0 33 40"
    aria-hidden="true"
    focusable="false"
  >
    <path
      fill="currentColor"
      d="M0 0h13l20 20-20 20H0l20-20z"
    ></path>
  </svg>
</a>

<StartButton href="#" />

Secondary buttons

Use secondary buttons for secondary calls to action on a page.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.

<button
  data-module="govuk-button"
  class="govuk-button govuk-button--secondary"
>
  Find address
</button>

<Button classModifiers="secondary">
  Find address
</Button>

You can also group default and secondary buttons together.

Warning buttons

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

<button
  data-module="govuk-button"
  class="govuk-button govuk-button--warning"
>
  Delete account
</button>

<Button classModifiers="warning">
  Delete account
</Button>

Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.

When letting users carry out an action like this, it’s a good idea to include an additional step which asks them to confirm it.

In this instance, use another style of button for the initial call to action, and a warning button for the final confirmation.

Do not only rely on the red colour of a warning button to communicate the serious nature of the action. This is because not all users will be able to see the colour or will understand what it signifies. Make sure the context and button text make clear what will happen if the user selects it.

Buttons on dark backgrounds

Use the govuk-button--inverse modifier class to show white buttons on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.

Make sure all users can see the button – the white button and background colour must have a contrast ratio of at least 3:1.

<div class="govuk-panel govuk-panel--interruption">
  <div class="govuk-panel__body">
    <button
      data-module="govuk-button"
      class="govuk-button govuk-button--inverse"
    >
      Create an account
    </button>
  </div>
</div>

<Panel classModifiers="interruption">
  <Button classModifiers="inverse">
    Create an account
  </Button>
</Panel>

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
  aria-disabled="true"
  data-module="govuk-button"
  disabled=""
  class="govuk-button govuk-button--disabled"
>
  Disabled button
</button>

<Button disabled>Disabled button</Button>

Grouping buttons

Use a button group when two or more buttons are placed together.

<div class="govuk-button-group">
  <button
    data-module="govuk-button"
    class="govuk-button"
  >
    Save and continue
  </button>
  <button
    data-module="govuk-button"
    class="govuk-button govuk-button--secondary"
  >
    Save as draft
  </button>
</div>

<ButtonGroup>
  <Button>Save and continue</Button>
  <Button classModifiers="secondary">
    Save as draft
  </Button>
</ButtonGroup>

Any links within a button group will automatically align with the buttons.

<div class="govuk-button-group">
  <button
    data-module="govuk-button"
    class="govuk-button"
  >
    Continue
  </button>
  <a class="govuk-link govuk-link--active" href="#">
    Cancel
  </a>
</div>

<ButtonGroup>
  <Button>Continue</Button>
  <A href="#">Cancel</A>
</ButtonGroup>

Stop users from accidentally sending information more than once

IMPLEMENTME

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.

<button
  data-module="govuk-button"
  data-prevent-double-click="true"
  class="govuk-button"
>
  Confirm and send
</button>

<Button data-prevent-double-click="true">
  Confirm and send
</Button>

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.

Submit buttons

Unofficial

When your button is a part of a form you will probably want to use a submit button.

<button
  data-module="govuk-button"
  type="submit"
  class="govuk-button"
>
  Save and continue
</button>

<SubmitButton>Save and continue</SubmitButton>

Hyperlinks

Unofficial

When your button is not part of a form you will probably want it to be a hyperlink by providing a href prop.

<a
  data-module="govuk-button"
  draggable="false"
  role="button"
  class="govuk-button govuk-button--active govuk-button--secondary"
  href="#"
>
  New search
</a>

<Button href="#" classModifiers="secondary">
  New search
</Button>