Buttons

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

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

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

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

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

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.

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

Warning button

HTML
Nunjucks

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

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

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

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>

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

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