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

Secondary button

Our secondary button design differs from the NHS design system. The research section below has more details about why.

Use a secondary button either:

• for secondary actions on a page
• when an action needs less prominence – for example because it is optional

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

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

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

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

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 nhsapp-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: "nhsapp-button--secondary nhsapp-button"
}) }}

</div>

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

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

Research

Full width buttons

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

Secondary button

We designed the NHS App secondary button as an alternative to a secondary button with a grey background. This was because our research found some participants overlooked that design or believed it was a disabled button. Some participants hesitated before selecting the button. The visual hierarchy of primary and secondary buttons was also found to be unclear for people with monochromatic vision.

In moderated usability testing, six out of six participants were able to use the NHS App secondary button for a variety of actions and without hesitation. Two participants had colour vision deficiency (colour blindness).

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.