Components

Button

The button component helps users carry out an action like starting an application or saving their information.

Open this button example in a new tab
HTML 
<button type="submit" class="govuk-button" data-module="govuk-button">
  Save and continue
</button>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

{{ modukButton({
  text: "Save and continue"
}) -}}

How it works

See GOV.UK button component guidance for detail on how this component works.

Default buttons

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

Open this button example in a new tab
HTML 
<button type="submit" class="govuk-button" data-module="govuk-button">
  Save and continue
</button>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

{{ modukButton({
  text: "Save and continue"
}) -}}

Start buttons

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

Open this button example in a new tab
Start now
HTML 
<a
  href="#"
  role="button"
  draggable="false"
  class="govuk-button govuk-button--start"
  data-module="govuk-button"
>
  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" />
  </svg>
</a>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

{{ modukButton({
  text: "Start now",
  href: "#",
  isStartButton: true
}) -}}

Secondary buttons

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

Open this button example in a new tab
HTML 
<button
  type="submit"
  class="govuk-button govuk-button--secondary"
  data-module="govuk-button"
>
  Find address
</button>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

{{ modukButton({
  text: "Find address",
  classes: "govuk-button--secondary"
}) -}}

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.

Open this button example in a new tab
HTML 
<button
  type="submit"
  class="govuk-button govuk-button--warning"
  data-module="govuk-button"
>
  Delete account
</button>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

{{ modukButton({
  text: "Delete account",
  classes: "govuk-button--warning"
}) -}}

Disabled buttons

Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.

Open this button example in a new tab
HTML 
<button
  type="submit"
  disabled
  aria-disabled="true"
  class="govuk-button"
  data-module="govuk-button"
>
  Disabled button
</button>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

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

Grouping buttons

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

Open this button example in a new tab
HTML 
<div class="govuk-button-group">
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Save and continue</button
  ><button
    type="submit"
    class="govuk-button govuk-button--secondary"
    data-module="govuk-button"
  >
    Save as draft
  </button>
</div>
Nunjucks
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

HTML element for the button component – input, button or a. In most cases you will not need to set this as it will be configured automatically if href is provided. This parameter will be removed in the next major version.
text string Required.

If html is set, this is not required. Text for the input, button or a element. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined.
html string Required.

If text is set, this is not required. HTML for the button or a element only. If html is provided, the text option will be ignored and element will be automatically set to "button" unless href is also set, or it has already been defined. This option has no effect if element is set to "input".
name string

Name for the input or button. This has no effect on a elements.
type string

Type for the input or button element – "button", "submit" or "reset". Defaults to "submit". This has no effect on a elements.
value string

Value for the button element only. This has no effect on a or input elements.
disabled boolean

Whether the button component should be disabled. For input and button elements, disabled and aria-disabled attributes will be set automatically. This has no effect on a elements.
href string

The URL that the button component 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.
isStartButton boolean

Use for the main call to action on your service's start page.
id string

The ID of the button.

 
{% from "moduk/components/button/macro.njk" import modukButton -%}

<div class="govuk-button-group">
  {{ modukButton({
    text: "Save and continue"
  }) -}}

  {{- modukButton({
    text: "Save as draft",
    classes: "govuk-button--secondary"
  }) -}}
</div>

Changes from the GOV.UK version

MOD.UK Design System components are closely based on GOV.UK Design System components.

For this component we’ve changed the font.

Have you tested this component?

Let us know how we could improve this component or share your user research findings.

Email the MOD.UK Design System team at design-system@digital.mod.uk

Need help?

Email the MOD.UK Design System team at design-system@digital.mod.uk if you have questions or feedback.