Button component

[anandamaryon-gov]

Current issue

Currently the prototype kit relies on the standard button styles from gov design system.

However, the secondary button style on the gov design system (https://design-system.service.gov.uk/components/button/) uses a light grey background colour which clashes with the home office design system's page grey background colour.

Gov design system secondary button style:

Gov design system secondary button style when used on home office design system background:

Suggested change

My suggestion would be to implement the button styles used in the home office design system, detailed here: https://www.figma.com/file/y90OmHLuhtNuCUOc7jzQlj/Home-Office-design-library-(Roboto)?node-id=4%3A88

Screenshot of button styles detailed in the home office design system, from the link above.

Note:
I'm not sure on the usage and history behind the 'Affordable action' button styles, so I'd leave these for a separate issue for now, unless anybody can make a case for adding these too.

[isobelseacombe]

NHS have an off-white background, these are the button styles that they use https://service-manual.nhs.uk/design-system/components/buttons. I wonder if we could borrow some of this for the Home Office styles?

[isobelseacombe]

I don't think I've ever seen the 'affordable' action buttons used anywhere

[anandamaryon-gov]

I've now gotten to a point in my service where I'll need to implement some secondary buttons.

I explored a darker background version @isobelseacombe but I feel it looks a little too much like a button:disbaled style.

Currently I have gone for the style used in the HO Design System Figma file.

It looks like this:

Had to add the following to my app.scss:

.govuk-button.govuk-button--secondary { // for specificity since 'vendor' styles are loaded after local ones
  background: #F8F8F8;
  border: 1px solid #0B0C0C; // text colour, should be replaced with variable name
  padding: 9px 10px; // 2px taller to account for the transparent 2px border in the default button styles
  box-shadow: 0px 1px 0px #0B0C0C; // text colour, should be replaced with variable name
}

I'd suggest these styles are added into the main HO CSS, since I know that others would like to use secondary buttons too.

[tomyems]

We've put together a suggested button component, based on the example above (and reviewing similar examples across the Home Office), you can view a draft: https://645e60090a414800b0b99c78--hods.netlify.app/components?name=Button

[tomyems]

Actually, this idea of making a new 'HomeOfficeButton' component probably isn't very helpful.

The Home Office styling for secondary buttons is as a result of the page background, this is provided by the hods-page class. Therefore we should instead override the govuk styling when it's contained by the an element with the hods-page class.

This will mean anyone whose using our styles but (for whatever reason) has a GOV.UK styled page will get the GOV.UK secondary button, and on any Home Office styled pages will get the Home Office styled secondary button.

[tomyems]

Updated to just override the style given element contained within hods-page class: https://646f75cfdc9466069d2746f0--hods.netlify.app/components?name=Button

[tomyems]

Deadline for comments 14 June

[tomyems]

In a design system working group discussion on 18 August 2023, we considered the display as part of the Page component #540 or technically in the Page component but displayed as a distinct page (story) on the Home Office design system website #518.

We decided that designers looking for information would be looking for guidance on buttons (or even secondary buttons) rather than within the Page component itself.

For the standalone button component we need to explore adding the NotGovUK documentation - to make the 'Props' component work. We should also explore making is specifically about the secondary button as this is the only thing that changes.

[tomyems]

Updated draft to:

• change text of secondary button to 'Find address' (to match GOV.UK design system)
• remove 's' from 'Secondary buttons' heading
• make grey background more explicit

[tomyems]

https://662a4de1f49550b0540ef145--hods.netlify.app/components?name=Button

[tomyems]

Approved in design system working group today