Skip to main content

Status

When to use this component

Use status indicators when you need to present a system, page or element status to the user.

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, a ‘Info/neutral’ status indicator could be displayed on its own alongside unread messages in a list, to indicate their ‘unread’ status.

A status type class ons-status--<type> sets the color of the status indicator.

Success

A ‘success’ status lets the user know when something is either live, complete or successful.

<span class="ons-status ons-status--success">In progress</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'In progress',
        "type": 'success'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Pending

A ‘pending’ status lets the user know when something is not yet ready and is waiting for a process or action to be completed.

<span class="ons-status ons-status--pending">Pending</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Pending',
        "type": 'pending'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Dead

A ‘dead’ status lets the user know when something is inactive, has not been started or is dead.

<span class="ons-status ons-status--dead">Not started</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Not started',
        "type": 'dead'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Error

An ‘error’ status lets the user know when something is wrong, refused or has an error.

<span class="ons-status ons-status--error">Refused</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Refused',
        "type": 'error'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Info/neutral

A ‘info/neutral’ status lets the user know when something is new, ready or unread.

<span class="ons-status ons-status--info">Ready</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Ready'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Variants

Small

Each status ‘dot’ has a small variant which is applied by adding a ons-<status type>--small class to the <span>.

<span class="ons-status ons-status--success ons-status--small">Live</span>
{% from "components/status/_macro.njk" import onsStatus %}
{{
    onsStatus({
        "label": 'Live',
        "type": 'success',
        "size": 'small'
    })
}}
Name Type Required Description
type string false Sets the type of status, defaults to info/neutral if not provided
label false false The label for the status
size string false Set to ‘small’ to render the small variant
{% macro onsStatus(params) %}
    {% if params.type is defined and params.type %}
        {% set typeClass = ' ons-status--' + params.type %}
    {% else %}
        {% set typeClass = ' ons-status--info' %}
    {% endif %}

    {% if params.size is defined and params.size == 'small' %}
        {% set sizeClass = ' ons-status--small' %}
    {% endif %}

    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
{% endmacro %}
@mixin status-dot($status-color) {
  background-color: $status-color;
  border: 3px solid $status-color;
}

@mixin status-size($status-size: 1rem, $status-mb: -0.15rem) {
  height: $status-size;
  margin-bottom: $status-mb;
  width: $status-size;
}

.ons-status {
  &::before {
    @include status-size;

    border-radius: 100%;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    margin-right: 0.391rem;
  }

  /* Small status indicators for information dense situations */
  &.ons-status--small::before {
    @include status-size(0.555555rem, $status-mb: 0.055556rem);
  }

  &.ons-status--success::before {
    @include status-dot($color-success-vibrant);
  }
  &.ons-status--pending::before {
    @include status-dot($color-pending-vibrant);
  }
  &.ons-status--error::before {
    @include status-dot($color-errors-vibrant);
  }
  &.ons-status--dead::before {
    @include status-dot($color-dead);
  }
  &.ons-status--info::before {
    @include status-dot($color-info-vibrant);
  }
}

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Status’ component on GitHub