Alternative button styles

[joelanman]

What

Alternatives to the default green button style.

Why

There is sometimes a need to differentiate between buttons. For example, where there are multiple buttons on a page and some need greater or less prominence than others.

Alternative button styles have been observed in multiple government services.

Working group review, March 2019

Styles for 'secondary' and 'destructive' buttons were contributed to the GOV.UK Design System by the Design System team on 13 March 2019.

Preview this contribution

The team also considered contributing 'quiet' and 'link' styled buttons, but decided that there was not yet sufficient evidence that they were widely needed (in the case of 'quiet' buttons) or could be made accessible (in the case of 'link' buttons).

Anything else

• Buttons in the Home Office Design System

[joelanman]

GOV.UK Notify:

[samuelhwilliams]

I'd find this useful for styling buttons as destructive, as in this example from Notify below. It feels like it should be possible to extend the .govuk-button class and apply a custom base colour to your new selector in sass.

[armstrongb]

We found that making the button content 'link blue' in colour helped to avoid users thinking that the secondary button was disabled.

[joelanman]

@armstrongb thanks! Was it previously black text on the same grey? Did you find a lot of users thinking it was disabled in research?

[armstrongb]

@joelanman the black didn't even get as far as formal research, we did some local pop-up testing and it was a high proportion of users that found the blue cognitively faster to use; and as it was a harmonious fit between button and links as a group of interactions we didn't undertake further research.

[simonwhatley]

In the claim crown court defence fees service, we tend to use blue as a secondary button colour.

Below is an example where a provider (solicitor, barrister or fee clerk) can add multiple miscellaneous fees related to a claim.

[frankieroberto]

We have this grey as a secondary button on an admin interface:

It's not ideal contrast-wise, and ideally we'd separate out "Save" and "Send to Review" as actions on two different pages, but it's what we have for now.

[adamsilver]

Here we have “global actions” in the top right and page level actions within the page, aligned left as normal.

[timpaul]

We have moved this to the 'To do' column of the community backlog as this work is likely to be needed by other components like Filter a list and Edit a list.

[dashouse]

Draft contribution in progress - https://github.com/alphagov/govuk-frontend/pull/1207

[edwardhorsford]

Services occasionally have the need to have many buttons on a page - such as a long table where each row has one or more actions. I've commonly seen this done by styling a button that looks like a link - visually this seems to work well.

I know verify also used to have buttons styled like links for some secondary and uncommon actions - though couldn't find it when looking earlier this week.

It would be great if the design system explicitly covered this use case - markup to use, any semantics to think about. Or if it's not ok, guidance on what to do.

Example from service in development at BEIS:

In this example, a list of errors is displayed at the bottom with a 'dismiss' button that destructively clears the error. There could be tens or hundreds of these errors.

[edwardhorsford]

Some more examples of secondary actions as links:

Register to vote

(these are anchor tags, enhanced with javascript)

Examples in this thread

I note that two of the examples above also appear to include what might be buttons styled as links (though they possibly navigate to a confirmation page instead).

[edwardhorsford]

The 'open all' action on the accordion component:

(hasn't got an underline, but otherwise looks like a link)

[edwardhorsford]

Cancel links might also often be 'buttons' - if they're doing a destructive action (flushing a cache?).

[soniaturcotte]

Here’s some examples of what we do on Content Publisher (new publishing app for GOV.UK).

All of these examples have been through multiple rounds of testing, including with users with different assisitive tech, and have performed very well.

Primary and secondary buttons

The secondary button is only ever used when paired with the primary button. In each case, the available actions change depending on the state of the document.

A couple design considerations:

• We found that the green primary and grey secondary combination was visually noisy. There wasn’t a clear enough heirarchy on the primary action.
• More than two buttons on one page quickly became cluttered and confusing. In this example, we have buttons styled as links for further actions that the publisher can take.
• A fixed width for multiple buttons helped to reduce awkward spacing and ragged edges, again reducing a cluttered appearance. As this is an admin interface, there is quite a lot going on.

We did try other combinations early on, but none of them had the same balance and heirarchy. Here are a couple of those examples, but there were many varied combinations.

Destructive links and buttons

We use the same two-step model as GOV.UK Pay and GOV.UK Notify for any destructive actions. If selecting ’Delete draft‘ link in the screenshots above, they get a banner with confirmation step.

Design considerations:

• The red button is so loud, using it anywhere takes over the page. We use a red ‘destructive link’ with the button in the confirmation step to avoid distraction.

Quiet buttons

We have one more button style in the app, which is only used for ‘copy to clipboard‘.

Design considerations:

• Originally we used the same light grey button as GOV.UK Pay and GOV.UK Notify for ‘copy to clipboard’. However, because it is sometimes on the same busy page as our other buttons, it was once again too visually cluttered.
• Early on we heard other teams’ concerns that grey buttons look disabled. We haven’t seen evidence of this in testing, perhaps because the button usually appears after a publisher action (ie. Submit for 2i review = here is a link to copy)
• We only use this button to enhance user experience. Publishers can complete their tasks in another way (manually selecting the text, copy/paste). Therefore, even if they were to assume the button was disabled, it would not stop them from continuing.
• Additionally, if the user focuses the input, the full link is automatically selected, making it easy for them to continue regardless on how they prefer to work.

[amyhupe]

Working Group Review

A proposal to add secondary and warning buttons to the Design System was reviewed by the Design System working group–a panel of designers from GDS, HMRC, HMCTS, DWP, EA and Home Office on 28 March 2019.

Review outcomes

The group agreed that the alternative button styles should be published in the GOV.UK Design System.

They also made the following recommendations:

Design

• Consider whether the destructive button needs to be part of a flow that includes a subsequent or preliminary step that prompts the user to confirm they are sure they want to take the action in question.
• Consider renaming the destructive button as the action will not always be destructive.

Guidance

• Consider adding guidance on how secondary buttons should be used in conjunction with primary buttons and / or how many should be used on a page.
• Add guidance warning against overuse of destructive buttons and explaining when not to use them.
• Add guidance to destructive buttons to say don’t rely solely on colours to communicate the destructive nature of them.

Research

• Gather examples of destructive buttons being misused to inform the guidance on when not to use them.

The Design System team will aim to address as many of the recommendations as possible before publishing.

[edwardhorsford]

I'm finding the new reduced contrast grey on secondary buttons really hard to see - I imagine on many monitors it might show as pure white. It's not essential that it always be seen, but it would be nice if it had more contrast / outline.

It's also been raised that it doesn't work any more when used on ligiht grey itself. Previously we had panel colour and secondary buttons (and whatever grey they were) worked on top of it. My service uses buttons like this - but with the new grey they become invisible:

What it used to look like:

Panels aren't so commonly used, but sometimes really help - it would be great if the buttons worked on it and didn't become invisible.

[titlescreen]

Further to @edwardhorsford's comment on the button contrast, would we consider darkening the govuk-colour("green") from #00703c to #006636? We had some instances of the button font being smaller than 19px which was making the button harder to read for some users.

That tweak would hit AAA contrast for normal text on a button and nudge the design system a bit closer to AAA.

If this was accepted then we would probably want to alter the hover background colour as well, but I think the underline we already have would serve as the non-colour designator.

[christopherthomasdesign]

Hi @titlescreen thanks for your comment and sorry it took so long to reply

We’ve already darkened the green once, and we’re trying to avoid everything tending towards black over time. That can happen if you make lots of isolated contrast improvements without keeping an eye on the overall palette. There's a blog post that covers our reasoning for the overall colour changes in more detail.

I'd be interested to hear more about the user need that led to changing some button text to 16px – it's not something we currently recommend.