Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

Status Indicator

Status Indicators provide visual cues to convey the status of an element or system, helping users to understand actions or conditions.

  • Overview
  • Specs
  • Guidelines

Component

Status Indicators use colors and symbols to create user-recognizable meanings throughout the product. There’s also various forms to adapt to different use cases.

Status Indicator anatomy
  • A : Dot
  • B: Icon
  • C: Extended
  • D: Label (Variation)
  • 1: Icon
  • 2: Label
Status Indicator on a warning

Used for:

Communicating conditions

The main function of the status indicator is to describe the status of an element based on a list of conditions defined by the platform on which it is implemented.

Don’t use for:

Minimal status variation

If there are minimal or negligible changes in the status of the elements, the use of Status Indicators can clutter the interface without providing significant value.

Ambiguous status

When the status of the elements cannot be clearly defined or is subject to interpretation, the use of Status Indicators can lead to confusion rather than clarity.

Unnecessary redundancy

If the status of elements is already conveyed through other means, such as text labels or contextual cues, adding Status Indicators may create redundancy.

Dynamic content

In interfaces with dynamic or rapidly changing content, the use of Status Indicators can be ineffective, as they may not accurately reflect the current status of the elements in real time.

Overwhelming complexity

In interfaces with a large number of elements or complex interactions, the use of status indicators for each element can overwhelm users and hinder comprehension.

Ambiguous Status Indicator

Demo

Access the Figma file and inspect the element using Dev Mode.

Status Indicator in Figma

Last Update

  • Several segments updated;
  • Guidelines have been added to clarify when to use chips versus Status Indicators.

Related

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …

Variations

Dot
.statusIndicator {
    width: 8px;
    height: 8px;
}
Icon Only
.statusIndicator {
    width: 24px;
    height: 24px;
    padding: var(--spacing-4);
    icon: 16px;
}
Extended
.statusIndicator {
    height: 24px;
    padding: var(--spacing-4, --spacing-8);
    gap: var(--spacing-8);
    icon: 16px;
    label: var(--label-small);
}
Label
.statusIndicator {
    height: 24px;
    padding: var(--spacing-4, --spacing-8);
    label: var(--label-small);
}

Status

Informative
.info {
    dot: var(--info-100);
    background-color: var(--info-20);
    icon: var(--info-100), 'info_circle';
    label: var(--info-100);
}
Positive
.positive {
    dot: var(--success-100);
    background-color: var(--success-20);
    icon: var(--success-100), 'check_circle';
    label: var(--success-100);
}
Warning
.warning {
    dot: var(--warning-100);
    background-color: var(--warning-20);
    icon: var(--warning-100), 'error_circle';
    label: var(--warning-100);
}
Negative
.negative{
    dot: var(--error-100);
    background-color: var(--error-20);
    icon: var(--error-100), 'error_circle';
    label: var(--error-100);
}
Neutral
.neutral {
    dot: var(--grey-8);
    background-color: var(--grey-4);
    icon: var(--grey-8), 'block';
    label: var(--grey-8);
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Behavior

Variations

Status Indicators are common components found in many different layouts, so it’s important to ensure they always integrate seamlessly. They come in four variants, each suited to different design needs:

  • Dot: represented by a simple dot;
  • Icon: represented with the status background and an icon;
  • Extended: represented exactly like the Icon variation, but with an additional text;
  • Label: represented with text only.

Naturally, variations that have more elements provide users with additional information about an element. However, simpler variations – such as the dot – may be preferable when users already have enough context and adding a label would cause redundancy.

In the example below, the Status Indicator is integrated into a component that already includes labels. To avoid a cluttered interface, the dot variation is used.

Dot-shaped Status Indicator applied to a Select Box

Simpler variations can also be useful when working with limited space. However, it’s important to ensure users are given enough context to understand their meaning.

Prioritize the more informative variations, as long as the interface remains uncluttered.

Use simpler variations when the information they are intended to convey isn’t clear.

Status

Informative

This variation is represented by the color blue and the information icon and should be used to reflect the following statuses: informative, active, in use and published.

Positive

This variation is represented by the color green and the checkmark icon and should be used in the following statuses: positive, approved, success and new.

Warning

Represented by the color orange and the warning icon. They should be used in the following statuses: alert, in approval, pending, scheduled, synchronizing, processing and uploading.

Negative

This variation is represented by the color red and the error icon and should be used in the following statuses: negative, error, rejected, failure and deleted.

Neutral

This variation is represented by the color grey and should be used in the following statuses: neutral, archived, deleted, paused, draft, not started, complete and finalized.

Consider using more than one Status Indicator if an element is affected by multiple conditions.

Use the Status Indicator for purposes other than status indication, such as giving instructions.

Trimming

When the text is too long, a new line should be created. If there is no room for a new line, the text should be truncated and displayed on hover.

Trimmed Status Indicators

If needed, add a second line of text.

Chips vs Status Indicators

Since Chips and Status Indicators have some similar variations, it’s important to understand when to use each one.

Chips are components that invite user interaction – whether by having users click on them, or by reflecting their inputs. They are versatile components that can be placed in various parts of the layout and are mainly used for categorization and filtering.

On the other hand, Status Indicators are informative components that are not meant to be interactive. Their main function is to convey information or notify users. They’re less flexible than chips as they only convey details about limited conditions set by the system they’re implemented in. They are often placed next to the interface element to which they refer.

It is worth noting that Chips can also be used to provide information to users though its informative variant. In the example below, both Chips and Status Indicators are implemented on a card. The Chip displays a category the user has previously selected, while the Status Indicator conveys information about the card over which the user has no control.

Cards with a Chip and a Status indicator

Case Studies

Accessible Web for Everyone

Declaração de Acessibilidade do Compose Design

O Compose Design é gerido pela equipa Experience Architecture da Cegid e foi desenvolvido para ser utilizado pelo maior número …
Why Web Accessibility Matters - And How to Start

Why Web Accessibility Matters – And How to Start

Web accessibility is about designing inclusive digital experiences that benefit everyone, guided by four key principles and driven by the …
Writing for Everyone

Writing for Everyone: Every Word Counts in Accessibility

Writing for everyone is an essential part of any digital product. It can and does make a big difference to …

Outline