govuk-design-system-backlog
govuk-design-system-backlog copied to clipboard
alphagov
Button
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
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>?
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
There seems to be no new govuk style, guidance or examples for secondary buttons, previously achieved with class name button--secondary. Is this to be seen as discouraging their use?
@nubz Hi - we don't currently have any guidance or examples in the GOV.UK Design System, and as far as I can tell, this wasn't provided in GOV.UK Elements either.
In general we recommend using only one call to action on a page, styled as our green button. However there are services where there's a user need for a secondary button. We need to gather some evidence on when secondary buttons help, and get that pattern into the Design System. Would you be able to help with that? Posting research/user needs in this thread would be great.
Thanks @joelanman - in one service we used them for an ajax address lookup where some users entered upwards of 20 addresses in a single form and spreading out the related questions for each address as one thing per page did not make sense - grouping related questions and the address lookup together in a single form page tested well with our users.
Could we add:
In general we recommend using only one call to action on a page, styled as our green button.
To the Design System guidance (along with any research to support this)?
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?
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
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.
I think it would be helpful if other colours were supported for the buttons. The most common ones in active use in services I've seen are grey secondary buttons, blue buttons, and red buttons (delete actions).
I don't think the old Elements button macro exists any more, so users need to define the background colour, the hover colour, and the shadow colour. I wonder if these could be provided for the common buttons in active use.
Example of delete button in our service:
For reference, I used $govuk-error-colour for the background colour.
I used the shade function from this post - as suggested by @dashouse.
I used hover shade of 10% and bottom shadow of 50%
To anyone looking at implementing @edwardhorsford's solution above by using the button component and overrriding some styles, it is necessary to override the styles for the button when it is disabled, and also when it is focused, but not hovered.
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?
@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.
In principle the buttons could be the same colour. So it's not an absolute barrier for users.
With that said, we make them different because we think one should be clearly the primary one - and we should try to continue that.
The general luminance between both primary and secondary should be different - which it looks like it is. @vickytnz in the example above they don't look the same - the 'save and continue' looks much darker / different from the 'save as draft'. Can you explain what looks the same to you?
@edwardhorsford I think Vicky's referring to Primary vs Destructive, not Secondary
Does anyone have any recent accessibility research findings on the use the 'start now' links (buttons) with voice recognition software? (eg. Dragon).
The start now button relies on the aria role 'button' to make use of the 'click button' voice command to show the user all the buttons on the page. Aria role isn't supported by versions of Dragon below v13, which, as pointed out in the blog post Results of the 2016 GOV.UK assistive technology survey, is not the most commonly used version of Dragon (well not in 2016, at least)
In the accessibility lab at GDS we are running versions 13 and 15 on which the start buttons do work. I can’t recall now if they didn’t work with v 12 or 12.5. I would anticipate there wouldn’t be much usage now below version 13 and if the button doesn’t work directly with Dragon there is the option for the user of Mousegrid which should operate it without difficulty (although I always tell people that is a bit of a compromise)
Thanks @accessiblewebuk for your response.
Do we have any more recent data about assistive tech usage (and versions)? Does anyone know of any plans to conduct another assistive tech survey?
From a Slack conversation - I think the wording proposed for the buttons is odd - do users really need to know information is saved at every step? surely that's assumed. It leads to some screen reader issues where different buttons for "save and continue" and "save and exit" sound alike.
@antimega You might be right, but just to say that not all services do Save and continue - shorter transactions without accounts like Register to vote for example
@antimega @joelanman If there are two buttons ('Save and continue' and 'Continue without saving') then the distinction might be important but I can't imagine that situation arising. If there's only one button then I can't see a significant benefit in describing whether it saves or doesn't.
Hi Mark - could clicking on the download button act as the confirmation? I imagine the service would be able to tell if the user had done that, and then you wouldn't need the checkbox at all.
Hi @timpaul , I've missed out that it is an 'AGENT facing' system.
The risk is that the AGENT will leave without the PDF downloading in time. The service needs to compile everything that the AGENT has collected over the phone. (The compiling is quite slow). There is also the risk that it may not initiate the download. If you leave using 'Finish and close' it will clear the session and now there will be no option of a second attempt at downloading the PDF.
The session is only stored within the bowser and so there is a risk the AGENT may lose everything, which I guess is our worst case scenario.
The following this step is that it needs to be entered into a legacy system, until we can pry it away and the PDF is no longer needed.
@a184studio the way it's worded makes me think you're ok to check it as soon as you click the button - so you might get the same issue that it's marked before the download is completed. I'd look to see if you can make it clear you're interested in whether the download has completed.
@edwardhorsford Yeah, it's basically for an AGENT to double check the download was successful, the data is there and go back into the service and close the session.
But you are right, there would be nothing to stop an AGENT from clicking the checkBox then leaving without the data, but if they didn't download the PDF they will lose everything.