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 login with icon at end

Open this example in a new tab: Button login with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "login",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button login with icon at end, small

Open this example in a new tab: Button login with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "login",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button login with icon at start

Open this example in a new tab: Button login with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "login",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button login with icon at start, small

Open this example in a new tab: Button login with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--login nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "login",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  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 reverse with icon at end

Open this example in a new tab: Button reverse with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "reverse",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button reverse with icon at end, small

Open this example in a new tab: Button reverse with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "reverse",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button reverse with icon at start

Open this example in a new tab: Button reverse with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "reverse",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button reverse with icon at start, small

Open this example in a new tab: Button reverse with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--reverse nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "reverse",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  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 secondary, solid background with icon at end

Open this example in a new tab: Button secondary, solid background with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "secondary-solid",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button secondary, solid background with icon at end, small

Open this example in a new tab: Button secondary, solid background with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "secondary-solid",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button secondary, solid background with icon at start

Open this example in a new tab: Button secondary, solid background with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "secondary-solid",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button secondary, solid background with icon at start, small

Open this example in a new tab: Button secondary, solid background with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary-solid nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "secondary-solid",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  small: true
}) }}

Button secondary with icon at end

Open this example in a new tab: Button secondary with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "secondary",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button secondary with icon at end, small

Open this example in a new tab: Button secondary with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "secondary",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button secondary with icon at start

Open this example in a new tab: Button secondary with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "secondary",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button secondary with icon at start, small

Open this example in a new tab: Button secondary with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--secondary nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "secondary",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  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 warning with icon at end

Open this example in a new tab: Button warning with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "warning",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button warning with icon at end, small

Open this example in a new tab: Button warning with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  variant: "warning",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button warning with icon at start

Open this example in a new tab: Button warning with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "warning",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button warning with icon at start, small

Open this example in a new tab: Button warning with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--warning nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  variant: "warning",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  small: true
}) }}

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

Button with icon at end

Open this example in a new tab: Button with icon at end

Code

Markup

<button class="nhsuk-button nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  icon: {
    name: "arrow-right",
    placement: "end"
  }
}) }}

Button with icon at end, small

Open this example in a new tab: Button with icon at end, small

Code

Markup

<button class="nhsuk-button nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <span class="nhsuk-button__content">Next</span>
  <svg class="nhsuk-icon nhsuk-icon--arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="m14.7 6.3 5 5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-5 5a1 1 0 0 1-1.4-1.4l3.3-3.3H5a1 1 0 0 1 0-2h11.6l-3.3-3.3a1 1 0 1 1 1.4-1.4Z"/>
  </svg>
</button>

Macro

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

{{ button({
  text: "Next",
  icon: {
    name: "arrow-right",
    placement: "end"
  },
  small: true
}) }}

Button with icon at start

Open this example in a new tab: Button with icon at start

Code

Markup

<button class="nhsuk-button nhsuk-button--icon" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  icon: {
    name: "arrow-left",
    placement: "start"
  }
}) }}

Button with icon at start, small

Open this example in a new tab: Button with icon at start, small

Code

Markup

<button class="nhsuk-button nhsuk-button--icon nhsuk-button--small" data-module="nhsuk-button" type="submit">
  <svg class="nhsuk-icon nhsuk-icon--arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
    <path d="M10.7 6.3c.4.4.4 1 0 1.4L7.4 11H19a1 1 0 0 1 0 2H7.4l3.3 3.3c.4.4.4 1 0 1.4a1 1 0 0 1-1.4 0l-5-5A1 1 0 0 1 4 12c0-.3.1-.5.3-.7l5-5a1 1 0 0 1 1.4 0Z"/>
  </svg>
  <span class="nhsuk-button__content">Previous</span>
</button>

Macro

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

{{ button({
  text: "Previous",
  icon: {
    name: "arrow-left",
    placement: "start"
  },
  small: true
}) }}