Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Status tag

Overview

Use a status tag to tell the user the status of a task.

Important information:

To tell the user what stage a website or service is in, use the phase banner

How to use this component

Unless the context of the status indicator makes its use clear and obvious to sighted users, it should be displayed alongside a relevant and consistent label.

For example, an “Info (neutral)” status indicator could be displayed on its own alongside unread messages in a list, to indicate their “unread” status.

Use type to set the colour of the status indicator.

Success

This lets the user know when something is live, complete or successful.

Open this example in a new tab (Example Status Success)

Example Status Success contents

Nunjucks

{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Live',
        "variant": 'success'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant

HTML

<span class="ons-status ons-status--success">Live</span>

Pending

This lets the user know when something is not ready and is waiting for a process or action to be completed.

Open this example in a new tab (Example Status Pending)

Example Status Pending contents

Nunjucks

{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Pending',
        "variant": 'pending'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant

HTML

<span class="ons-status ons-status--pending">Pending</span>

Dead

This lets the user know when something is inactive or has not been started.

Open this example in a new tab (Example Status Dead)

Example Status Dead contents

Nunjucks

{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Not started',
        "variant": 'dead'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant

HTML

<span class="ons-status ons-status--dead">Not started</span>

Error

This lets the user know when there is an error.

Open this example in a new tab (Example Status Error)

Example Status Error contents

Nunjucks

{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Refused',
        "variant": 'error'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant

HTML

<span class="ons-status ons-status--error">Refused</span>

Info

This lets the user know when something is new, ready or unread.

Open this example in a new tab (Example Status Neutral Information)

Example Status Neutral Information contents

Nunjucks

{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Ready'
    })
}}

Nunjucks macro options

NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant

HTML

<span class="ons-status ons-status--info">Ready</span>

Variants

Small

Each status “dot” has a small variant which you can use by setting size to “small”.

Open this example in a new tab (Example Status Small)

Example Status Small contents

Nunjucks
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Live',
        "variant": 'success',
        "size": 'small'
    })
}}
Nunjucks macro options
NameTypeRequiredDescription
variantstringfalseSet the type of status can be set to: “success”, “pending”, “error”, “dead” or “info”. Defaults to “info”.
labelfalsetrueThe text label for the status
sizestringfalseSet to “small” to render the small variant
HTML
<span class="ons-status ons-status--success ons-status--small">Live</span>

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss the ‘Status’ component on GitHub (opens in a new tab) 

Back to top