Content presentation
-
Tag
WCAG 2.2 affects this component
To meet new success criteria introduced in the Web Content Accessibility Guidelines (WCAG) 2.2, make sure that users can successfully:
See the full list of design system changes to meet WCAG 2.2.
When to use a tag
Use the tag component when it's possible for something to have more than 1 status and it's useful for the user to know about that status. For example, you can use a tag to show whether an item in a task list has been "completed".
How it works
Tags are just used to indicate a status. Do not add links. Use adjectives rather than verbs for the names of your tags. Using a verb might make a user think that clicking on them will do something.
Showing 1 or 2 statuses
Sometimes a single status is enough. For example, if you need to tell users which parts of an application they've finished and which they have not, you may only need a "Completed" tag. Because the user understands that if something does not have a tag, that means it's incomplete.
Or it can make sense to have 2 statuses. For example, you may find that you need 1 tag for "Active" users and 1 for "Inactive" users.
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Name of user </th>
<th class="nhsuk-table__header" scope="col"> Status </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Les Hunter
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--grey">
Inactive
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Naomi Edwards
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--grey">
Inactive
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Lyra Louth
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag">
Active
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Michelle Flynn
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag">
Active
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Brian Okello
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--grey">
Inactive
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Lisa Lenehan
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag">
Active
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Emily Snailham
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--grey">
Inactive
</strong>
</td>
</tr>
</tbody>
</table>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name classes | Type string | Required false | Description Classes to add to the tag. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the tag. |
{% from 'tag/macro.njk' import tag %}
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Name of user </th>
<th class="nhsuk-table__header" scope="col"> Status </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Les Hunter
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Inactive",
classes: "nhsuk-tag--grey"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Naomi Edwards
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Inactive",
classes: "nhsuk-tag--grey"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Lyra Louth
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Active"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Michelle Flynn
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Active"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Brian Okello
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Inactive",
classes: "nhsuk-tag--grey"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Lisa Lenehan
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Active"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Emily Snailham
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Inactive",
classes: "nhsuk-tag--grey"
})}}
</td>
</tr>
</tbody>
</table>Showing multiple statuses
Tags should be helpful to users. The more you add, the harder it is for users to remember them. So start with the smallest number of statuses you think might work, then add more if your user research shows there's a need for them.
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Application </th>
<th class="nhsuk-table__header" scope="col"> Status </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Leo Cashin
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--red">
Urgent
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Amy Louth
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--blue">
New
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Barbara Angel
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--blue">
New
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Annette Armstrong
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--blue">
New
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Vishal Gurudutt
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--blue">
New
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Rachel Preece
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--green">
Finished
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Tom Hunter
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--yellow">
Waiting on
</strong>
</td>
</tr>
</tbody>
</table>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name classes | Type string | Required false | Description Classes to add to the tag. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the tag. |
{% from 'tag/macro.njk' import tag %}
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Application </th>
<th class="nhsuk-table__header" scope="col"> Status </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Leo Cashin
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Urgent",
classes: "nhsuk-tag--red"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Amy Louth
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "New",
classes: "nhsuk-tag--blue"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Barbara Angel
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "New",
classes: "nhsuk-tag--blue"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Annette Armstrong
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "New",
classes: "nhsuk-tag--blue"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Vishal Gurudutt
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "New",
classes: "nhsuk-tag--blue"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Rachel Preece
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Finished",
classes: "nhsuk-tag--green"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
Tom Hunter
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Waiting on",
classes: "nhsuk-tag--yellow"
})}}
</td>
</tr>
</tbody>
</table>Any tag implementation that allows the user to change the order of tags must offer a way to do so without relying on click and drag movements. This is to comply with WCAG 2.2 success criterion 2.5.7 Dragging Movements (W3C).
Using colour with tags
You can use colour to help distinguish between different tags – or to help draw the user's attention to a tag if it's especially important. For example, it makes sense to use nhsuk-tag--red for a tag that reads "Urgent".
Do not rely on colour alone to convey information because it's not accessible. If you use the same tag in more than 1 place, make sure you keep the colour consistent.
Because tags with solid colours tend to stand out more, it's usually best to avoid mixing solid colours and tints: use one or the other. This matters less if you're only using 2 colours. For example, it's okay to use the tint nhsuk-tag--grey and solid blue tags together if you only need 2 statuses.
We use a border of the same colour as the tag text to stand out against the NHS page background colour.
Additional colours
If you need more tag colours, you can use the following tints.
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Class name </th>
<th class="nhsuk-table__header" scope="col"> Tag </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--white </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--white">
Started
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--grey </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--grey">
Not started
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--green </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--green">
New
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--aqua-green </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--aqua-green">
Active
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--blue </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--blue">
Pending
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--purple </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--purple">
Received
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--pink </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--pink">
Sent
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--red </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--red">
Rejected
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--orange </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--orange">
Declined
</strong>
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--yellow </code>
</td>
<td class="nhsuk-table__cell">
<strong class="nhsuk-tag nhsuk-tag--yellow">
Delayed
</strong>
</td>
</tr>
</tbody>
</table>Nunjucks macro options
Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
Some options are required for the macro to work; these are marked as "Required" in the option description.
If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.
| Name | Type | Required | Description |
|---|---|---|---|
| Name text | Type string | Required true | Description If `html` is set, this is not required. Text to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name html | Type string | Required true | Description If `text` is set, this is not required. HTML to use within the tag component. If `html` is provided, the `text` argument will be ignored. |
| Name classes | Type string | Required false | Description Classes to add to the tag. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the tag. |
{% from 'tag/macro.njk' import tag %}
<table class="nhsuk-table">
<thead class="nhsuk-table__head">
<tr class="nhsuk-table__row">
<th class="nhsuk-table__header" scope="col"> Class name </th>
<th class="nhsuk-table__header" scope="col"> Tag </th>
</tr>
</thead>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--white </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Started",
classes: "nhsuk-tag--white"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--grey </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Not started",
classes: "nhsuk-tag--grey"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--green </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "New",
classes: "nhsuk-tag--green"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--aqua-green </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Active",
classes: "nhsuk-tag--aqua-green"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--blue </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Pending",
classes: "nhsuk-tag--blue"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--purple </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Received",
classes: "nhsuk-tag--purple"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--pink </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Sent",
classes: "nhsuk-tag--pink"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--red </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Rejected",
classes: "nhsuk-tag--red"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--orange </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Declined",
classes: "nhsuk-tag--orange"
})}}
</td>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell">
<code> nhsuk-tag--yellow </code>
</td>
<td class="nhsuk-table__cell">
{{ tag({
text: "Delayed",
classes: "nhsuk-tag--yellow"
})}}
</td>
</tr>
</tbody>
</table>Accessibility
All contrasts between text and background meet level AAA of WCAG 2.0. Read more about accessibility and colour.
Research
We have tested tags in the NHS e-referral service, the "Submit your electronic declaration" service and the NHS App prescriptions service. We found that they helped users:
- make a decision about whether or not to proceed with their journey
- understand their progress or the status of an order
- save time as they could see the information they needed quickly
We also found that it helped to use sentence case rather than block capitals for readability.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: April 2024