Button

[govuk-design-system]

Use this issue to discuss the button component from the GOV.UK Design System.

• View this component in the GOV.UK Design System
• View a list of open issues and pull requests for this component

[timpaul]

Related article: Disabled buttons suck

[pds2208]

Why are there two different methods used to render a button? The start button type used an <a> tag while the other two use <button>?

[kr8n3r]

Hi, thanks for getting in touch
start "button" is a link to the next page so it's appropriate to use a tag for this.

When used in a form then a button or input type=submit tag should be used

[davidolsan]

We are working on "Add a course" backend portal used by the Providers to add a new course.

Think of Gmail inbox with each email being a course with a date, duration, cost etc.
Now just like Gmail I need various buttons - archive, duplicate, delete etc.

Any idea how these buttons would be (if anyone has done this and have an example that would be super helpful) implemented on one page as a GDS design pattern?

[thaskeengithub]

I am following GDS and I have to create Secondary and Tertiary buttons for the site, but couldn't find these buttons styles in GDS, if anyone has done please share, it will be helpful. - Thanks

[edwardhorsford]

I wonder if button should be wrapped in <div class="govuk-form-group"></div> by default? or as an option?

I've joined a service and our cancel links sit weirdly with buttons - I suspect in most situations (page per thing), you'll want the button to be a block level element - whereas right now it behaves as if it's inline.

[vickytnz]

I'm not an expert on red-green colourblindness but when I've put the red and green through Sim Daltonism under deuteranopia the two buttons look pretty much exactly the same in terms of shade - is there sufficient difference in the shades of buttons in these situations?

[joelanman]

@vickytnz it's a good point and potentially we can look at improving the design for colourblind people, but it's important to note colour isn't the only thing conveying meaning here - the button text does too.

[chrisadesign]

Some questions around labels when save and return is an option, there seems to be some inconsistency.

The design system has:

• ‘Continue’ when the service does not save a user’s information
• ‘Save and continue’ when the service does save a user’s information
• ‘Save and come back later’ when a user can save their information and come back later
  but
• ‘Save and continue’ and ‘Save as draft’ as a coded example

The GOV.UK Sign In service uses a ‘Continue’ button and ‘Save and complete later’ link in their documentation.

[adamliptrot-oc]

Is there a reason why the hover states for buttons (and links) are so slight compared to the focus states?
I was on a call yesterday with a low-vision user who was using a large mouse pointer but struggled to see when the buttons and links were under it as the state change wasn't apparant.

[owenatgov]

We had a low vision user on support today make note of the poor contrast on secondary buttons:

For me (as someone who sees fewer colours than most people), the bottom border isn't enough. I'd like to know why borders on the other 3 sides weren't implemented. It doesn't look like a button because it's just underlined text to me (I can't see the grey background at all).

This is following them querying the contrast on the secondary button and me making a note of the bottom border as a visual delimiter. There have been a couple of mentions in this issue to the secondary button not being great for low vision users even with the bottom border. At present it technically doesn't fail 1.4.11 but it still might not be 100% accessible.

[adamliptrot-oc]

It looks like the js which handles links which are styled as buttons (with the role="button" attribute) is missing some of the native functionality, specifically the ability to cancel a spacebar "click" by using the tab key.

I've written up some testing: https://liptrot.org/posts/links_buttons_roles_and_behaviours/

[colinrotherham]

It looks like the js which handles links which are styled as buttons (with the role="button" attribute) is missing some of the native functionality, specifically the ability to cancel a spacebar "click" by using the tab key.

I've written up some testing: https://liptrot.org/posts/links_buttons_roles_and_behaviours/

Very good point @adamliptrot-oc

We'd love a contribution if you'd like to open a pull request?

https://github.com/alphagov/govuk-frontend/blob/7793d63813b5e86e11a3a4ed108f085cc7cd1a58/packages/govuk-frontend/src/govuk/components/button/button.mjs#L52-L53

[danielck]

What is the justification for setting cursor: pointeron regular buttons? The intended meaning of the "hand cursor" on the web and in the CSS spec is to indicate a link. This is also the recommendation in Apple's and Microsoft's guidelines. Have you done user research that would suggest adding cursor: pointer to interactive elements improves success rate or something else?

I am asking this because we are discussing the removal of cursor: pointer in another project and I was pointed (ahem) to Gov.uk as an example of its use. So far, I couldn't find any research that would support customizing the cursor, assuming buttons are designed to look clickable in the first place.

[RichardBradley]

We've had lots of trouble with users submitting forms twice on govuk-design-system projects and found that the "preventDoubleClick" setting is insufficient, because the button turns back on again after 1 second. Users who are still waiting for the form to submit will then click the button again at that point.

So we are not using the "preventDoubleClick" setting but instead have custom js code that permanently disables the form submit buttons after first click, regardless of how long the actual form submit takes. This has very much reduced the number of form double-submits we get, and we haven't had any user complaints about it.

Why was the 1 second timeout chosen?

Would you consider changing the "preventDoubleClick" setting from 1 sec to permanent?

... and, if it were up to me, this would be on by default, rather than opt-in. What service actually wants double form submissions?

[TomGNorris]

With the new guidance on COTS systems, does anyone have any thoughts on buttons in services linking to external non-gov platforms?

For example linking from a Gov.UK service for paying a fine to an external payment provider (not Gov.UK Pay) or to a non-GOV.uk platform like a service support portal (e.g. ServiceNow)

Also interested in anyones thoughts on if that service should attempt to imitate the design system to maintain citizen trust... or use its own design system (still running research on that one).

[gilalvaro-mod]

I have a question, If we are following the Type scale, were the Button text sits? I see buttons text on mobile is 16px and desktop is 19px, but when looking on the Type scale the Point on type scale 19 and 16 they stick the same size no matter the screen, this will make the text "govuk-body-s", "govuk-heading-s", "govuk-body" stay the same while the buttons change to smaller size when changed to mobile view.

Mobile:

Desktop:

Typescale:

I am struggling implementing this in figma as you can see I am trying to implement the variables for each screen size but I may have to add a row just for buttons which I believe is an unconvecional way of setting the type scale.

Thank you in advance.

[joelanman]

The page your type scale screenshot is from explains that the new type scale is opt in:

February 2024: GOV.UK Frontend v5.2 includes the new type scale behind a feature flag. This update will make text easier to read on smaller screens. It will become the standard type scale in a future release, but for now you can still view the old type scale.

Read about updating your service to use the new type scale.

This means the default button is using the old scale. It's probably best to use the new one, in which case the text stays at 19px on mobile.

[gilalvaro-mod]

Cheers @joelanman, yes I was consued as the page had the old and new type scale and the button was using the old one not the new one.
I will keep that in mind, and yes makes sense and I can now update the Figma Button type scales.

By the way would be great to have a way to change the version of the design system on the documentation page. Example

[CharlotteDowns]

We're doing some investigations into Buttons 👋🏻

We'd love to get your help reviewing and playing into our work on improving buttons. Join our Github discussions:

• Adding rounded corners to buttons #4941
• Improving legibility of buttons using the new brand colour palette #4953

[samantharwright]

I was wondering if anyone can share insight on the rationale of blue buttons on the GOV.UK Chat design? (Though I appreciate the design might have changed by now)

[CharlotteDowns]

In version 6.0 of GOV.UK Frontend we updated the colours within the button component to align with the updated GOV.UK colour palette. The new palette is updated on the GOV.UK Design System website (styles > colour)

[tomndennis]

Hi — we’ve received a WCAG 2.2 Level A accessibility issue on one of our services relating to button state styling.

The issue raised is that the contrast between the focused and unfocused secondary button states relies primarily on colour change and does not provide sufficient differentiation, which has been flagged as a failure of WCAG 2.2 Success Criterion 1.4.1 Use of Color (Level A).

These buttons are currently using the GOV.UK Design System secondary button styles. At the moment, our understanding is that this may need to be addressed within the GOV.UK Design System itself.