Button

Button

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button disabled

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button link

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button start

Open this example in a new tab

Code

Markup

<button type="submit" class="govuk-button govuk-button--start" data-module="govuk-button">
  Start now button
  <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>
</button>

Macro

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

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

Button start link

Open this example in a new tab

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" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z"/>
  </svg>
</a>

Macro

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

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

Button input

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button input disabled

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button prevent double click

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button with active state

Open this example in a new tab

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

Code

Markup

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

Macro

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

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

Button with hover state

Open this example in a new tab

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

Code

Markup

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

Macro

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

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

Button with focus state

Open this example in a new tab

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

Code

Markup

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

Macro

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

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

Button secondary

Open this example in a new tab

A button for secondary actions

Code

Markup

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

Macro

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

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

Button secondary disabled

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button secondary link

Open this example in a new tab

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

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

Button warning

Open this example in a new tab

A button for actions that need a warning

Code

Markup

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

Macro

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

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

Button warning disabled

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button warning link

Open this example in a new tab

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

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

Button inverse

Open this example in a new tab

A button that appears on dark backgrounds

Code

Markup

<button type="submit" name="Inverse" class="govuk-button govuk-button--inverse" data-module="govuk-button">
  Inverse button
</button>

Macro

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

{{ govukButton({
  name: "Inverse",
  text: "Inverse button",
  classes: "govuk-button--inverse"
}) }}

Button inverse disabled

Open this example in a new tab

Code

Markup

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

Macro

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

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

Button inverse link

Open this example in a new tab

A link button for actions that appear on dark backgrounds

Code

Markup

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

Macro

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

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

Button inverse start

Open this example in a new tab

A start button that appears on dark backgrounds

Code

Markup

<a href="/" role="button" draggable="false" class="govuk-button govuk-button--inverse govuk-button--start" data-module="govuk-button">
  Inverse start button
  <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>

Macro

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

{{ govukButton({
  name: "Inverse",
  text: "Inverse start button",
  href: "/",
  classes: "govuk-button--inverse",
  isStartButton: true
}) }}