Status tag

<div class="ds_tag">
    Active
</div>

About status tags

Status tags tell the user the status of something. Tags have a colour and must have a short label to tell users what the status is.

When to use status tags

Use tags to show a particular state when it’s possible for something to have more than one status.

For example, you can use tags in a:

• task list – to tell a user which parts of an application form they have completed
• phase banner – to show if a website is in alpha or beta phase

Only use tags to display a status. Do not style links, buttons or other interactive elements as tags. This is because users:

• might not realise the tags are something they’re meant to interact with
• would see no visual difference between interactive and non-interactive tags

How many status tags to use

You can use one or more status tags on a page.  

Avoid using too many status tags. Start with the smallest number of statuses you think might work. Then add more if your user research shows you need them.  

Adding more tags increases the visual clutter on the page and the cognitive load for users.

A single status tag might be enough. For example, a tag could have the status ‘incomplete’. Another tag status is not needed as it’s implied that anything else is complete. View an example of single status tags on gov.scot.

You may need to show 2 opposite statuses. For example, you could use 2 tags to show ‘active’ and ‘inactive’ users on a webpage.

You can use multiple statuses if needed. For example, there are 4 statuses in the task list pattern.

Status tag labels

The text label in tags should be:

• sentence case – it's easier to scan
• adjectives – verbs wrongly suggest that tags are interactive, like buttons
• as short as possible – it's easier to scan and reduces users’ cognitive load

We use our standard font weight for tag labels. Bold text may be confusing to users as it can make the tag look like a button in Windows high contrast mode.

Use a tag label that’s appropriate for the service you’re designing and meets the user need.

Common text labels for tags include:

• Active
• Inactive
• New
• Finished
• Complete
• Incomplete
• In progress
• Pending
• Sent
• Received
• Delayed
• Declined

Using colour in status tags

Do not use colour alone to convey a status as this is not accessible. You must also use a text label.

Use the same colour for the same status wherever it’s used.

The default colour for tags is blue.

You can use other colours in tags to:

• help distinguish between tag statuses
• draw the user’s attention to a status that is critical – for example, you may want to use a red tag for an ‘urgent’ status

We recommend you use the following colours for status tags.

<table class="ds_table">
    <caption>Colour options for the status tag component</caption>
    <thead>
        <tr>
            <th scope="col">Tag</th>
            <th scope="col">Name</th>
            <th scope="col">CSS class</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><span class="ds_tag  ds_tag--grey">Status</span></td>
            <td>Grey</td>
            <td><code>ds_tag--grey</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--green">Status</span></td>
            <td>Green</td>
            <td><code>ds_tag--green</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--teal">Status</span></td>
            <td>Teal</td>
            <td><code>ds_tag--teal</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--blue">Status</span></td>
            <td>Blue</td>
            <td><code>ds_tag--blue</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--purple">Status</span></td>
            <td>Purple</td>
            <td><code>ds_tag--purple</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--pink">Status</span></td>
            <td>Pink</td>
            <td><code>ds_tag--pink</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--red">Status</span></td>
            <td>Red</td>
            <td><code>ds_tag--red</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--orange">Status</span></td>
            <td>Orange</td>
            <td><code>ds_tag--orange</code></td>
        </tr>
        <tr>
            <td><span class="ds_tag  ds_tag--yellow">Status</span></td>
            <td>Yellow</td>
            <td><code>ds_tag--yellow</code></td>
        </tr>
    </tbody>
</table>

The text colour has a contrast ratio of 4.5:1 against the background colour to meet Web Content Accessibility Guidelines (WCAG) success criterion 1.4.3.

How to choose status tag colours

Use colours in line with your users’ associations and mental models. They should be logical and easy to interpret. For example, using a green tag for something that is blocked or incomplete is likely to confuse users.

Do not assume that users apply the same meanings to colours as you do. Test your service with users to check how they interpret the colours you’ve used.

Remember that:

• users are unlikely to care if the colours match your organisational brand
• colours have different social and political associations in different countries and cultures

Accessibility

The status tag component has been designed to meet WCAG 2.2 colour contrast criteria by using:

• a border around the status tag so it stands out against any page background colour (criterion 1.4.11)
• text colour that has a contrast ratio of 4.5:1 against the background colour (criterion 1.4.3)

Evidence

The status tag component aligns closely with the tag component in other design systems, including GOV.UK.

Research and testing

The status tag component was included in the testing of the task list pattern. View the findings of the testing in the task list pattern guidance.