Tag
Use the tag component to show users the status of something.
When to use this component
Use the tag component when it’s possible for something to have more than one 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 list of tasks has been ‘completed’.
How it works
There are 2 ways to use the tag component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Tags are only used to indicate a status. Do not make a tag interactive by making it into a link or button. Use adjectives (descriptive words) and not verbs (action words) for the names of your tags. Using a verb might make a user think that clicking on them will do something.
Do not use tags to create links, buttons or other interactive elements, as users:
are unlikely to identify the tags as something they’re meant to interact with
would see no visual difference between interactive and non-interactive tags
Get the Nunjucks macro for this example from the Camden Frontend library
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 probably makes sense to use govuk-tag--red for a tag that reads ‘Urgent’.
Do not use colour alone to convey information because it’s not accessible. If you use the same tag in more than one place, make sure you keep the colour consistent.
Research on this component
This component is based on the tag component from the GOV.UK Design System.
You can take part in the ‘Tag' discussion on GOV.UK’s Design System’s GitHub and share your research.