Skip to main content
Design resources
Back

Status tags in Task list pages

This pattern is archived

Use these Status tags with the Task list pages pattern from the GOV.UK Design System.

This pattern is an iteration of the status tag used in the GOV.UK Task list pages pattern. This is because it only includes a status tag for “Completed”. Also, user research found the styling of the tag difficult to read and there were no findings to support the use of coloured boxes.

Open this example in a new tab: Status tags in task list pages Display in English Display in Welsh

When to use

This pattern is specifically designed for use with the GOV.UK Task list pages pattern. Use the Status tag to show which tasks are done and which tasks are still to do.

When not to use

Do not use the Status tags when you are not using the Task list pages pattern. When you need to show that your service is still being worked on, use the Phase banner.

How it works

You need HMRC Frontend to use this pattern — find out how to install HMRC Frontend. If you use the HMRC Nunjucks macro, you must copy and paste the entire macro into your code.

Start with using the GOV.UK Task list pages pattern. Make sure you word the tasks using active verbs where possible.

Use simple text in sentence case, unless there is a strong user need to support the need for coloured boxes. Use:

  • “Not started” if the user has not started the task
  • “In progress” if the user has started but not finished the task
  • “Completed” if the user has finished the task

How to use Status tags with the GOV.UK Task list pages

These instructions tell you how to amend or add to the code of the GOV.UK Task list pages to use Status tags.

You can find the code for the Task list pages pattern in the /docs/views/templates folder of the GOV.UK Prototype Kit.

Not started

Find this code in the Task list pages pattern:

<span class="app-task-list__task-name"><a href="#">List convictions</a></span>

And change it to: 

<span class="app-task-list__task-name">
  <a href="#" aria-describedby="list-convictions-not-started">List convictions</a>
</span>

Then add this code directly below it: 

<span class="hmrc-status-tag" id="list-convictions-not-started">
  Not started
</span>

In progress

Find this code in the Task list pages pattern:

<span class="app-task-list__task-name"><a href="#" aria-describedby="read-declaration-completed">Read declaration</a></span>

Change it to: 

<span class="app-task-list__task-name">
  <a href="#" aria-describedby="read-declaration-in-progress">Read declaration</a>
</span>

Then add this code directly below it: 

<span class="hmrc-status-tag" id="read-declaration-in-progress">
  In progress
</span>

Completed

Find this code in the Task list pages pattern:

<strong class="govuk-tag app-task-list__task-completed" id="eligibility-completed">Completed</strong>

Change it to:

<span class="hmrc-status-tag" id="eligibility-completed">
  Completed
</span>

Research

This pattern is based on the status tags used in the Anti-money laundering supervision (AMLS), Register a trust and Manage a registered pension scheme services.

There is evidence that users found this wording easy to understand and they knew they had to click the task to complete or change their answers.

Other kinds of tags are used in services to show different states, for example:

  • Cannot start
  • Paid
  • Overdue

We need more research to understand how these are used. If you have used other kinds of Status tags on your service, get in touch to share your research findings.

Discuss the Status tag on GitHub