Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Button

These examples are used for automated tests and may not follow service manual best practice.

Button default

Open this example in a new tab: Button default

Code

Markup

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

Macro

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

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

Button disabled

Open this example in a new tab: Button disabled

Code

Markup

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

Macro

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

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

Button disabled, small

Open this example in a new tab: Button disabled, small

Code

Markup

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

Macro

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

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

Button login

Open this example in a new tab: Button login

Code

Markup

<button class="nhsuk-button nhsuk-button--login" data-module="nhsuk-button" type="submit">
  Continue
</button>

Macro

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

{{ button({
  text: "Continue",
  variant: "login"
}) }}

Button login disabled

Open this example in a new tab: Button login disabled

Code

Markup

<button class="nhsuk-button nhsuk-button--login" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Continue
</button>

Macro

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

{{ button({
  text: "Continue",
  variant: "login",
  disabled: true
}) }}

Button login disabled, small

Open this example in a new tab: Button login disabled, small

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--small" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Continue
</button>

Macro

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

{{ button({
  text: "Continue",
  variant: "login",
  disabled: true,
  small: true
}) }}

Button login, small

Open this example in a new tab: Button login, small

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--small" data-module="nhsuk-button" type="submit">
  Continue
</button>

Macro

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

{{ button({
  text: "Continue",
  variant: "login",
  small: true
}) }}

Button reverse

Open this example in a new tab: Button reverse

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" type="submit">
  Log out
</button>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse"
}) }}

Button reverse as a link

Open this example in a new tab: Button reverse as a link

Log out
Code

Markup

<a class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Log out
</a>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse",
  href: "#"
}) }}

Button reverse as a link, small

Open this example in a new tab: Button reverse as a link, small

Log out
Code

Markup

<a class="nhsuk-button nhsuk-button--reverse nhsuk-button--small" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Log out
</a>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse",
  small: true,
  href: "#"
}) }}

Button reverse disabled

Open this example in a new tab: Button reverse disabled

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Log out
</button>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse",
  disabled: true
}) }}

Button reverse disabled, small

Open this example in a new tab: Button reverse disabled, small

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--small" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Log out
</button>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse",
  disabled: true,
  small: true
}) }}

Button reverse, small

Open this example in a new tab: Button reverse, small

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--small" data-module="nhsuk-button" type="submit">
  Log out
</button>

Macro

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

{{ button({
  text: "Log out",
  variant: "reverse",
  small: true
}) }}

Button secondary

Open this example in a new tab: Button secondary

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary"
}) }}

Button secondary disabled

Open this example in a new tab: Button secondary disabled

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary",
  disabled: true
}) }}

Button secondary disabled, small

Open this example in a new tab: Button secondary disabled, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary",
  disabled: true,
  small: true
}) }}

Button secondary, small

Open this example in a new tab: Button secondary, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--small" data-module="nhsuk-button" type="submit">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary",
  small: true
}) }}

Button secondary, solid background

Open this example in a new tab: Button secondary, solid background

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid" data-module="nhsuk-button" type="submit">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid"
}) }}

Button secondary, solid background as a link

Open this example in a new tab: Button secondary, solid background as a link

Find my location
Code

Markup

<a class="nhsuk-button nhsuk-button--secondary-solid" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Find my location
</a>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid",
  href: "#"
}) }}

Button secondary, solid background as a link, small

Open this example in a new tab: Button secondary, solid background as a link, small

Find my location
Code

Markup

<a class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small" data-module="nhsuk-button" href="#" role="button" draggable="false">
  Find my location
</a>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid",
  small: true,
  href: "#"
}) }}

Button secondary, solid background disabled

Open this example in a new tab: Button secondary, solid background disabled

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid",
  disabled: true
}) }}

Button secondary, solid background disabled, small

Open this example in a new tab: Button secondary, solid background disabled, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid",
  disabled: true,
  small: true
}) }}

Button secondary, solid background, small

Open this example in a new tab: Button secondary, solid background, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--small" data-module="nhsuk-button" type="submit">
  Find my location
</button>

Macro

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

{{ button({
  text: "Find my location",
  variant: "secondary-solid",
  small: true
}) }}

Button default, small

Open this example in a new tab: Button default, small

Code

Markup

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

Macro

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

{{ button({
  text: "Save and continue",
  small: true
}) }}

Button warning

Open this example in a new tab: Button warning

Code

Markup

<button class="nhsuk-button nhsuk-button--warning" data-module="nhsuk-button" type="submit">
  Yes, delete this vaccine
</button>

Macro

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

{{ button({
  text: "Yes, delete this vaccine",
  variant: "warning"
}) }}

Button warning disabled

Open this example in a new tab: Button warning disabled

Code

Markup

<button class="nhsuk-button nhsuk-button--warning" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Yes, delete this vaccine
</button>

Macro

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

{{ button({
  text: "Yes, delete this vaccine",
  variant: "warning",
  disabled: true
}) }}

Button warning disabled, small

Open this example in a new tab: Button warning disabled, small

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--small" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
  Yes, delete this vaccine
</button>

Macro

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

{{ button({
  text: "Yes, delete this vaccine",
  variant: "warning",
  small: true,
  disabled: true
}) }}

Button warning, small

Open this example in a new tab: Button warning, small

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--small" data-module="nhsuk-button" type="submit">
  Yes, delete this vaccine
</button>

Macro

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

{{ button({
  text: "Yes, delete this vaccine",
  small: true,
  variant: "warning"
}) }}

Button with double click not prevented

Open this example in a new tab: Button with double click not prevented

Code

Markup

<button class="nhsuk-button" data-module="nhsuk-button" data-prevent-double-click="false" type="submit">
  Save and continue
</button>

Macro

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

{{ button({
  text: "Save and continue",
  preventDoubleClick: false
}) }}

Button with double click prevented

Open this example in a new tab: Button with double click prevented

Code

Markup

<button class="nhsuk-button" data-module="nhsuk-button" data-prevent-double-click="true" type="submit">
  Save and continue
</button>

Macro

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

{{ button({
  text: "Save and continue",
  preventDoubleClick: true
}) }}