Full-width buttons not documented, which means we use them inconsistently across services

[mrmjprice]

What

We need to write documentation for when to use [ text width ] and [ full-width 1-col ] buttons
This is important so we can make consistent services

Why

Explain why you think this should be added to the West Midlands Network Design System (WMN DS).

• It's not clear when to use full-width (we usually do this for continue buttons on a question page) or text width only, which we use for pretty much every other button

Anything else

NHS uses [text width], as they found users treat full-width buttons like they're headers
GOV.UK Design System uses [text width] for desktop and [full width] for mobile
Our current page about buttons

[issue-label-bot]

Issue-Label Bot is automatically applying the label feature_request to this issue, with a confidence of 0.54. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[mrmjprice]

For what it's worth, I prefer GOV.UK's approach as it means users don't have to strain their thumb to click a button.

[mrmjprice]

Also, an interesting experience of a team changing a start button from blue to green is documented in the GOV.UK Design System backlog. They found 9% higher click-through rate.

[jkmnch]

I agree with the GOV approach to text-width buttons on desktop and full-width buttons on mobile. Here is the documentation to be added under the 'About' section of the Buttons component page:

H3: Button size

• The button width on desktop should be proportional with the text inside the button. Desktop buttons are aligned to the left edge of the content container.
• Buttons are full-width on mobile. This is so users can easily tap on a button without stretching their thumb.
• For the Question Form pattern, the ‘Continue’ call to action button should always be full-width within the container on desktop and mobile devices.

[wmcadigital-admin]

🎉 This issue has been resolved in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[houbly]

This update is now live