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

Open this example (Button primary) in a new window 
<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

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

View component in Vue

Secondary button

Open this example (Button secondary) in a new window 
<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

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

View component in Vue

Buttons on dark backgrounds (reverse button)

Open this example (Button reverse) in a new window 
<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

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

View component in Vue

Grouping buttons

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

Open this example (Button group) in a new window 
<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

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

View component in Vue

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

Open this example (Button group with link) in a new window 
<div class="nhsapp-button-group">
  <button
    class="nhsuk-button nhsapp-button"
    data-module="nhsuk-button"
    type="submit"
  >
    Continue
  </button>

<a href="#" class="nhsuk-link">Cancel</a>
</div>


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

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

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

  <a href="#" class="nhsuk-link">Cancel</a>

</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

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

View component in Vue

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

If you have used or researched this component, please let us know what you found so we can make it better for everyone.

Discuss 'Buttons' on GitHub where you can share anything you think might be useful.

You can also share feedback with us on Slack.