Button

Button

(open in a new window)

Code

Markup

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

Macro

{% from "button/macro.njk" import govukButton %}

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

Button disabled

(open in a new window)

Code

Markup

<button type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled" data-module="govuk-button">
  Disabled button
</button>

Macro

{% from "button/macro.njk" import govukButton %}

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

Button link

(open in a new window)

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button" data-module="govuk-button">
  Link button
</a>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Link button",
  "href": "/"
}) }}

Button link disabled

(open in a new window)

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--disabled" data-module="govuk-button">
  Disabled link button
</a>

Macro

{% from "button/macro.njk" import govukButton %}

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

Button start link

(open in a new window)

Code

Markup

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

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Start now link button",
  "href": "/",
  "isStartButton": true
}) }}

Button input

(open in a new window)

Code

Markup

<input value="Start now" name="start-now" type="submit" class="govuk-button" data-module="govuk-button">

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "input",
  "name": "start-now",
  "text": "Start now"
}) }}

Button input disabled

(open in a new window)

Code

Markup

<input value="Explicit input button disabled" type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--disabled" data-module="govuk-button">

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "element": "input",
  "text": "Explicit input button disabled",
  "disabled": true
}) }}

Button prevent double click

(open in a new window)

Code

Markup

<button type="submit" data-prevent-double-click="true" class="govuk-button" data-module="govuk-button">
  Submit
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "text": "Submit",
  "preventDoubleClick": true
}) }}

Button with active state

(open in a new window)

Simulate triggering the :active CSS pseudo-class, not available in the production build.

Code

Markup

<button name="active" type="submit" class="govuk-button :active" data-module="govuk-button">
  Active
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "active",
  "text": "Active",
  "classes": ":active"
}) }}

Button with hover state

(open in a new window)

Simulate triggering the :hover CSS pseudo-class, not available in the production build.

Code

Markup

<button name="hover" type="submit" class="govuk-button :hover" data-module="govuk-button">
  Hovered
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "hover",
  "text": "Hovered",
  "classes": ":hover"
}) }}

Button with focus state

(open in a new window)

Simulate triggering the :focus CSS pseudo-class, not available in the production build.

Code

Markup

<button name="focus" type="submit" class="govuk-button :focus" data-module="govuk-button">
  Focussed
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "focus",
  "text": "Focussed",
  "classes": ":focus"
}) }}

Button Secondary

(open in a new window)

A button for secondary actions

Code

Markup

<button name="secondary" type="submit" class="govuk-button govuk-button--secondary" data-module="govuk-button">
  Secondary button
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button",
  "classes": "govuk-button--secondary"
}) }}

Button Secondary disabled

(open in a new window)

Code

Markup

<button name="secondary" type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--secondary govuk-button--disabled" data-module="govuk-button">
  Secondary button disabled
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button disabled",
  "classes": "govuk-button--secondary",
  "disabled": true
}) }}

Button Secondary link

(open in a new window)

A link button for secondary actions

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--secondary" data-module="govuk-button">
  Secondary button
</a>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "secondary",
  "text": "Secondary button",
  "href": "/",
  "classes": "govuk-button--secondary"
}) }}

Button Warning

(open in a new window)

A button for actions that need a warning

Code

Markup

<button name="Warning" type="submit" class="govuk-button govuk-button--warning" data-module="govuk-button">
  Warning button
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "Warning",
  "text": "Warning button",
  "classes": "govuk-button--warning"
}) }}

Button Warning disabled

(open in a new window)

Code

Markup

<button name="warning" type="submit" disabled="disabled" aria-disabled="true" class="govuk-button govuk-button--warning govuk-button--disabled" data-module="govuk-button">
  Warning button disabled
</button>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "warning",
  "text": "Warning button disabled",
  "classes": "govuk-button--warning",
  "disabled": true
}) }}

Button Warning link

(open in a new window)

A link button for actions that need a warning

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--warning" data-module="govuk-button">
  Warning button
</a>

Macro

{% from "button/macro.njk" import govukButton %}

{{ govukButton({
  "name": "Warning",
  "text": "Warning button",
  "href": "/",
  "classes": "govuk-button--warning"
}) }}