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
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
Secondary button
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
Buttons on dark backgrounds (reverse button)
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
Grouping buttons
Use a button group when two or more buttons are placed together.
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
Any links within a button group will automatically align with the buttons.
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
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.