Components

Button

<button type="submit" class="govuk-button">
  Save and continue
</button>
{% from "button/macro.njk" import govukButton %}

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

You can configure this component using the Nunjucks macro arguments.

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 progress.

How it works

Write button text in sentence case, describing the action it performs. For example ‘Save and continue’ or ‘Start now’.

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.

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>
{% from "button/macro.njk" import govukButton %}

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

You can configure this component using the Nunjucks macro arguments.

Start buttons

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

<a href="#" role="button" class="govuk-button govuk-button--start">
  Start now
</a>
{% from "button/macro.njk" import govukButton %}

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

You can configure this component using the Nunjucks macro arguments.

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