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.

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

Button #34

Open
govuk-design-system opened this Issue Jan 12, 2018 · 12 comments

Comments

10 participants
@govuk-design-system
Copy link
Collaborator

govuk-design-system commented Jan 12, 2018

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

We're currently looking for information on secondary buttons.
Please add examples and related research in the comments.

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (In progress) Jan 12, 2018

@govuk-design-system govuk-design-system moved this from In progress to Published in GOV.UK Design System Community Backlog Jan 12, 2018

@timpaul

This comment has been minimized.

Copy link
Contributor

timpaul commented May 12, 2018

Related article: Disabled buttons suck

@timpaul timpaul added the component label May 21, 2018

@pds2208

This comment has been minimized.

Copy link

pds2208 commented Jun 25, 2018

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>?

@igloosi

This comment has been minimized.

Copy link
Contributor

igloosi commented Jun 26, 2018

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

@nubz

This comment has been minimized.

Copy link

nubz commented Jul 24, 2018

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?

@joelanman

This comment has been minimized.

Copy link
Member

joelanman commented Jul 24, 2018

@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.

@nubz

This comment has been minimized.

Copy link

nubz commented Jul 24, 2018

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.
secondary-button-use-case

@frankieroberto

This comment has been minimized.

Copy link
Collaborator

frankieroberto commented Sep 13, 2018

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)?

@davidolsan

This comment has been minimized.

Copy link

davidolsan commented Oct 8, 2018

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

This comment has been minimized.

Copy link

thaskeengithub commented Jan 12, 2019

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

This comment has been minimized.

Copy link

edwardhorsford commented Jan 25, 2019

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.

@edwardhorsford

This comment has been minimized.

Copy link

edwardhorsford commented Feb 18, 2019

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.

@edwardhorsford

This comment has been minimized.

Copy link

edwardhorsford commented Feb 18, 2019

Example of delete button in our service:
screenshot 2019-02-18 at 15 02 51

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%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment