NHS login button

[chrimesdev]

What

Add the NHS login button to the frontend library and NHS digital service manual as a variant of the Button component

Why

NHS login is becoming more and more popular, so a blue variant with the NHS lozenge of the Button and guidance about using the NHS login button would be useful.

NHS login button:

Taken from https://nhsconnect.github.io/nhslogin/adding-buttons/

There is also a variant without the NHS lozenge used on the NHS App:

Taken from https://www.nhsapp.service.nhs.uk/login

There is guidance for Adding the NHS login button to your service but it does not include any HTML or CSS to use. We can use this guidance to create a NHS login button in the frontend library.

Anything else

Lydia from the NHS login team is a good contact to discuss the usage and guidance for the NHS login button.

Examples

https://www.nhsapp.service.nhs.uk/login

NHS login buttons.zip

[darrenhutton]

A bit of a side discussion on where the button should be use...

I'd propose that the button should only be used in services that aren't core, national services developed by NHS Digital.

The use of the button outside of NHS services* (e.g. eRedbook, Evergreen etc.) brings trust and familiarity.

The creation of NHS Account, a "re-brand" of NHS login and available on the NHS website, (TBC) would help in this situation. NHS login would then be seen more like Google Sign-In - a service for third parties to use to enable users to access their apps using their NHS Account.

[sarawilcox]

We are working on some guidance on NHS login with NHSX. Looks like the recommended wording is: ""Continue with NHS login".

[chrimesdev]

Looks like the NHS Login button being used with HTML/CSS on https://covid-status.service.nhsx.nhs.uk/

Doesn't seem to have a hover state though.

[LydiaTeebay]

Hello! We've finally worked through our button guidance and created some updated rules. The main update is that we have split up the guidance depending on what type of service you are, as one button does not work for all! In terms of NHS services using the NHS Design System, we are happy to drop the NHS logo but would need to keep the button blue. The call to action we suggest is "Continue" as it aligns to the Design System button guidance, but we also have provided some content that we should go around the button. This hopefully means that NHS services using the Design System can go with what call to action meets their users needs, as long as it still adheres to the other button rules. Another key thing to note is how NHS login works, and why we are unable to use call to actions like "log in" or "register" - you cannot determine that will actually be the users journey and so we should avoid this. (again, the content advise around the button should help with this). See the full guidance here: https://nhsconnect.github.io/nhslogin/guidance/ (NB the link may change, this isn't being pushed to partners quite yet so we haven't made the link obvious), would be keen to link up with someone who can help us get this a component in the design system (for both NHS Design system users, and then non NHS users in case someone wants to mock up coming from a service?). Happy to chat about this - pop me a message on slack :)

[jackiemellorbrownlee]

hi @LydiaTeebay the link doesnt work please could you drop me an updated link on slack? really interested in this as I have a staff facing pattern that we'd like to align

[sarawilcox]

I'm wondering if it's this guidance? https://nhsconnect.github.io/nhslogin/button-guidance/. If not, would you mind sharing it here too, please, @LydiaTeebay?

[edwardhorsford]

This came up on my service. I can see the guidance for the button provides some css - but this looks to be rendered from some other sass - it would be helpful to have that.

In the short term, I've made this sass:

$app-button-login-color: $color_nhsuk-blue;
$app-button-login-hover-color: shade($app-button-login-color, 20%);
$app-button-login-active-color: shade($app-button-login-color, 50%);
$app-button-login-shadow-color: shade($app-button-login-color, 50%);

.app-button--login {
  background-color: $app-button-login-color;
  box-shadow: 0 $button-shadow-size 0 $app-button-login-shadow-color;

  &:hover {
    background-color: darken($app-button-login-color, 10%);
  }

  &:focus {
    background: $nhsuk-focus-color;
    box-shadow: 0 $button-shadow-size 0 $nhsuk-focus-text-color;
    color: $nhsuk-focus-text-color;
    outline: $nhsuk-focus-width solid transparent;
  }

  &:active {
    background: $app-button-login-active-color;
    box-shadow: none;
    color: $nhsuk-button-text-color;
    top: $button-shadow-size;
  }

  &.nhsuk-button--disabled {
    background-color: $app-button-login-color;
  }
}

This follows the patterns used by the other colour variants. Unlike the 'example' login button there are different shades for hover and active - this follows how other button styles work.