Components

Buttons

Use buttons to help users to carry out an action.

How to use

We use the NHS design system button with a modifier class of nhsapp-button to make buttons full width on smaller screens.

Primary button

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

{% from 'button/macro.njk' import button %}

{{ button({
  text: "Continue",
  classes: "nhsapp-button"
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Secondary button

<button
  class="nhsuk-button nhsuk-button--secondary nhsapp-button"
  data-module="nhsuk-button"
  type="submit"
>
  Try again
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  text: "Try again",
  classes: "nhsuk-button--secondary nhsapp-button"
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Buttons on dark backgrounds (reverse button)

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

{% from 'button/macro.njk' import button %}

{{ button({
  text: "Continue",
  classes: "nhsuk-button--reverse nhsapp-button"
}) }}

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Warning button

<button
  class="nhsuk-button nhsuk-button--warning nhsapp-button"
  data-module="nhsuk-button"
  type="submit"
>
  Cancel appointment
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  text: "Cancel appointment",
  classes: "nhsuk-button--warning nhsapp-button"
}) }}

Grouping buttons

Use a button group when two or more buttons are placed together.

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

<button class="nhsuk-button nhsuk-button--secondary nhsapp-button" data-module="nhsuk-button" type="submit" > Save as draft </button> </div>


{% from 'button/macro.njk' import button %}

<div class="nhsapp-button-group">

{{ button({
  text: "Save and continue",
  classes: "nhsapp-button"
}) }}

{{ button({
  text: "Save as draft",
  classes: "nhsuk-button--secondary nhsapp-button"
}) }}

</div>

To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.

View component in Figma (opens in a new tab)

To use the component in your Vue application, install the NHS App Vue Component Library and import the component.

View component in Vue (opens in a new tab)

Any links within a button group will automatically align with the buttons.

Research

Testing on the NHS App has found that full width buttons are not a problem for users with smaller screens. But we will continue to test if:

  • full width buttons are problematic for users with low digital skills
  • users don’t actually see them as actionable things to click

Help improve this component

To help make sure that this page is useful, relevant and up to date, you can:

You can also share feedback with us on Slack.