Tag
Use tags to show a status. Tags only display information and are not interactive.
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 |
|---|---|---|---|
| text | string | conditional | 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. |
| html | string | conditional | 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. |
| id | string | no | The ID of the tag. |
| classes | string | no | Classes to add to the tag. |
| attributes | object | no | HTML attributes for the tag (e.g. data-*, aria-*). |
To use the component in your design, add the NHS App Figma library to your working files, and navigate using the components tab.
To use the component in your Vue application, install the NHS App Vue Component Library and import the component.
When to use
Use tags to help users:
- understand the status of an activity or a process
- keep track of progress
- understand when they need to take an action
For example, tags can help users to:
- track prescription requests
- understand when they need to take an action regarding a hospital referral
When not to use
Too many tags, and lots of variation in tag colours, may clutter a page and overwhelm users. Tags can also affect the visual hierarchy of a page. This means tags should be used sparingly.
How to use
Tags can be placed within a card or outside of one. Inside a card, tags should always be left-aligned. Outside a card, tags can be aligned to the left or the right.
Tag text should:
- be in sentence case
- describe status in as few words as possible
How not to use
Do not use tags:
- as a header or grouping-class for elements or information
- as a selectable element
Tag text should not:
- be in bold
- start with a verb – users may think they can select the tag
Accessibility
Tag colours meet WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum) AAA.
Research
In our research, we found that red tags could cause some participants to feel concerned. Red was associated with something having gone wrong.
Help improve this component
The NHS App design system team would like to hear:
- how you have used this component in your service
- any feedback you have about its usage, for example accessibility or ideas for improvement
Add these comments to the 'Tag' discussion on GitHub.