Skip to content

Add button group and full width button styles #1309

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anandamaryon1 merged 13 commits into from
Jun 30, 2025
Merged

Add button group and full width button styles #1309

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3e93bba
Add missing clearfix to form group
colinrotherham May 20, 2025
9c7b232
Add missing `nhsuk-exports()` to form group
colinrotherham May 13, 2025
0058ba3
Add button group
colinrotherham Jun 23, 2025
b14e332
Update examples to use button group
colinrotherham May 20, 2025
1bc489b
Use full width buttons on mobile
colinrotherham May 21, 2025
f6e5126
Use spacing from NHS App Frontend
colinrotherham Jun 12, 2025
0c737b7
Add more test examples and enable spans in button groups
anandamaryon1 Jun 19, 2025
289c744
Formatting
colinrotherham Jun 19, 2025
e9e587b
Handle body text inside button groups
colinrotherham Jun 19, 2025
50d663c
Update reference images
colinrotherham Jun 26, 2025
486b3d0
Update CHANGELOG
frankieroberto Jun 30, 2025
a208b0c
Add links to pull request
frankieroberto Jun 30, 2025
d891885
Tweaks
frankieroberto Jun 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,12 @@ We’ve updated the header component to support account information and links. A

This was added in [pull request #1058: New header with account section](https://github.com/nhsuk/nhsuk-frontend/pull/1058).

#### Button groups

You can now group buttons and links together so that they appear side-by-side on tablet and desktop by using a `<div class="nhsuk-button-group"> </div>` container.

This was added in [pull request #1309: Add button group and full width button styles](https://github.com/nhsuk/nhsuk-frontend/pull/1309)

:boom: **Breaking changes**

You must make the following changes when you migrate to this release, or your service might break.
Expand Down Expand Up @@ -272,6 +278,12 @@ It was already possible to set the page app width with the `$nhsuk-page-width` v

This change was introduced in [#1412: Allow creating custom width containers](https://github.com/nhsuk/nhsuk-frontend/pull/1412)

#### Buttons are now full-width on mobile

All buttons now display as full-width at mobile size. This does not require any changes, but you should check that it does not break any of your layouts.
Comment thread
frankieroberto marked this conversation as resolved.
Outdated

This change was introduced in [pull request #1309: Add button group and full width button styles](https://github.com/nhsuk/nhsuk-frontend/pull/1309)

:recycle: **Changes**

We've made changes to NHS.UK frontend in the following pull requests:
Expand Down
118 changes: 38 additions & 80 deletions packages/nhsuk-frontend-review/src/examples/all-buttons.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,66 +23,52 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Button element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0"
"text": "Save and continue"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--warning"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--login"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--secondary"
}) }}
</div>
</div>

<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Link element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--warning",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--login",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary",
"href": "#"
}) }}
</div>
Expand All @@ -91,34 +77,27 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Disabled</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--warning",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--login",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary",
"disabled": true
}) }}
</div>
Expand All @@ -140,66 +119,52 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Button element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0"
"text": "Save and continue"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--warning"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--login"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--secondary"
}) }}
</div>
</div>

<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Link element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--warning",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--login",
"href": "#"
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary",
"href": "#"
}) }}
</div>
Expand All @@ -208,34 +173,27 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Disabled</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--warning",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--login",
"disabled": true
}) }}
</div>

<div class="nhsuk-form-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary",
"disabled": true
}) }}
</div>
Expand All @@ -257,21 +215,21 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Button element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--secondary-solid"
}) }}
</div>
</div>

<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Link element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary-solid",
"href": "#"
}) }}
</div>
Expand All @@ -280,10 +238,10 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Disabled</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--secondary-solid",
"disabled": true
}) }}
</div>
Expand All @@ -305,21 +263,21 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Button element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Log out",
"classes": "nhsuk-button--reverse nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--reverse"
}) }}
</div>
</div>

<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Link element</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Log out",
"classes": "nhsuk-button--reverse nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--reverse",
"href": "#"
}) }}
</div>
Expand All @@ -328,10 +286,10 @@
<div class="nhsuk-grid-column-one-third">
<p class="nhsuk-body nhsuk-u-margin-top-6">Disabled</p>

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">
{{ button({
"text": "Log out",
"classes": "nhsuk-button--reverse nhsuk-u-margin-bottom-0",
"classes": "nhsuk-button--reverse",
"disabled": true
}) }}
</div>
Expand Down
23 changes: 5 additions & 18 deletions packages/nhsuk-frontend-review/src/examples/all.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -951,38 +951,25 @@
]
}) }}

<div class="nhsuk-form-group">
<div class="nhsuk-button-group">

{{ button({
"text": "Save and continue",
"classes": "nhsuk-u-margin-bottom-0"
"text": "Save and continue"
}) }}

</div>

<div class="nhsuk-form-group">

{{ button({
"text": "Yes, delete this vaccine",
"classes": "nhsuk-button--warning nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--warning"
}) }}

</div>

<div class="nhsuk-form-group">

{{ button({
"text": "Continue",
"classes": "nhsuk-button--login nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--login"
}) }}

</div>

<div class="nhsuk-form-group">

{{ button({
"text": "Find my location",
"classes": "nhsuk-button--secondary nhsuk-u-margin-bottom-0"
"classes": "nhsuk-button--secondary"
}) }}

</div>
Expand Down
Loading