This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Feature flags

Feature flag control

This is an experimental feature for turning the 'rebrand' feature flag on and off only.

Show all flag states

Skip to main content

Button

Button 📸

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

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
}) }}
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 📸

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 input

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 secondary

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 warning

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 inverse 📸

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"
}) }}