Components

Buttons

Use buttons to help users to carry out an action.

How to use

We extend the NHS design system button with the nhsapp-button modifier class so that its border radius matches the card links.

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

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

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

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

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

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.

The NHS App design system team would like to hear:

how you have used this component in your service
any feedback you have about its usage, for example accessibility or ideas for improvement