Skip to content
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

Showing status #98

govuk-design-system opened this issue Jan 15, 2018 · 2 comments

Showing status #98

govuk-design-system opened this issue Jan 15, 2018 · 2 comments


Copy link

@govuk-design-system govuk-design-system commented Jan 15, 2018


Help users understand the status of something, so they can decide what action to perform next.


Statuses are used in many government services, especially internal ones. Many different styles are used however, so some guidance and good examples here would be useful.

Anything else

Related patterns

@govuk-design-system govuk-design-system created this issue from a note in GOV.UK Design System Community Backlog (Agreed) Jan 15, 2018
Copy link

@joelanman joelanman commented Apr 5, 2018

Considering we have both Tag and Task list published, seems like it might be easy to get this one done

Copy link

@christopherthomasdesign christopherthomasdesign commented Jul 5, 2019

We’ve been looking at showing status in our work on managing the certificates that teams connected to GOV.UK Verify use for encryption.

We’ve basically just used something very similar to a task list for showing the status of each certificate:

Screen Shot 2019-07-05 at 16 06 11

The labels should indicate whether the user needs to do something. And should reflect the real, live status of the thing they represent.

For some certificates, there’s a period where a new certificate is being uploaded and the old one is still in use. We use this ‘deploying’ tag:

Screen Shot 2019-07-05 at 16 08 05

This status is temporary, and we found that users needed a little more clarification on what’s going on. So on the page for that certificate, we added a banner at the top of the linked page (styled like an error summary/alert but coloured to match the tag). This explains what is happening in more detail:

Screen Shot 2019-07-05 at 16 19 05

So basically it’s just a combination of slightly adapted task list / alert components. It’s taken a few iterations but this is beginning to test quite well, would be interested to see what others are doing.

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

Successfully merging a pull request may close this issue.

None yet
4 participants