Skip to content

Status Indicator13.10.5

Status indicators usually communicate to user where they are (or system is) in the process flow.


$ npm i @if-design-system/status-indicator@13.10.5

Status indicator
Edit this section

Overview

Status indicators usually communicate to user where they are (or system is) in the process flow.

Progress is displayed via differentiated status symbols, each denoted with a specific color code.

Edit this section

Usage

Principles

Use status indicator to:

  • indicate progress of an ongoing task;
  • describe the status of process flow;
  • describe the state of an action and whether any other action is required;

Types

Active
Status indicator - Active

Active status indicator can be used to denote active state state of a process flow or an action.

Active status indicator also may be used to signal a new state of an item/object.

Success
Status indicator - Success

Success status indicator can be used to denote success state of a process flow or an action.

Success status indicator also may be used to signal a available state of an item/object.

In Progress
Status indicator - In Progress

In progress status indicator can be used to denote progress state state of a process flow or an action.

In progress status indicator also may be used to signal a busy state of an item/object.

Error
Status indicator - Error

In progress status indicator can be used to denote error state state of a process flow or an action.

In progress status indicator also may be used to signal a retired state of an item/object.

Paused
Status indicator - Paused

In progress status indicator can be used to denote paused state state of a process flow or an action.

In progress status indicator also may be used to signal a on vacation state of an item/object.

Status indicator - Active without descriptive text

Status indicator can be used without descriptive text as well.

Refer to the Accessibility section for more info on how to make it accessible

Edit this section

Accessibility

Label

If the description text is omitted from inside of status indicator, aria-label (or aria-labelledby) must be provided to describe the current state of status indicator, which will be read out by screen reader.

<span class="if status-indicator paused" aria-label="currently paused"></span>

Or:

<span class="if text" id="id-to-label-current-status">Currently paused</span>
...
<span class="if status-indicator paused" aria-labelledby="id-to-label-current-status"></span>

Role

If the status indicator is subject to change dynamically, it is worth adding `role="status"` to status indicator container element to let the screen reader know when a change has happened.

When

<div class="if container" role="status">
  <span class="if text heading">Claim status</span>
  <span class="if status-indicator active"><span class="if text meta">Processing</span></span>
</div>

Becomes

<div class="if container" role="status">
  <span class="if text heading">Claim status</span>
  <span class="if status-indicator success"><span class="if text meta">Processed</span></span>
</div>

Screen reader will politely announce the new claim status.

NB

Please note that if the description text is omitted there must be some other textual change, apart from status indicator `class` and `aria-label` changes, in case of dynamic update for screen reader to pick it up. Screen reader will be able to read status state only when manually navigating to it:
<div class="if container" role="status">
  <span class="if text heading">Claim status</span>
  <span class="if status-indicator paused" aria-label="currently paused"></span>
</div>

Will yield Claim status currently paused, but no dynamic updates will be announced.

Therefore, it is advisable to keep the textual content of status indicator within role="status".

Add .if .axe .sr-only classes to the textual element, which will hide it from the viewport but will keep it available for screen readers.

<div class="if container" role="status">
  <span class="if text heading">Claim status</span>
  <span class="if status-indicator success"><span class="if axe sr-only">Processed</span></span>
</div>

For more info on role="status" refer to w3 and MDN.

Edit this section

Anatomy

Active
Status indicator with description text
  1. Status indicator circle
  2. Description text (optional)
Status indicator without description text
  1. Status indicator circle
Edit this section

Specs

Active
Spacing

If descriptive text is used, it is padded 8px on the right side

Success In Progress
Size

Status indicator circle is 12px by 12px

Edit this section

Implementation

Status indicator without screen reader support to dynamic updates

<span class="if status-indicator active"><span class="if text meta">Active</span></span>

Status indicator with screen reader support to dynamic updates and hidden description text

<!-- or any other container element having `role="status" attribute` -->
<div class="if container" role="status">
  <span class="if status-indicator success"><span class="if axe sr-only">Success</span></span>
</div>
Edit this section

Contact us