Status light

Version 6.0.0

Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.

An example of a table that includes a column for the status of each item, which uses status lights in each row to indicate the status. The statuses shown are "in review" in orange, "draft" in gray, and "approved" in green. Each status light component includes a small colored dot next to a gray text label.
DateVersionSpectrumExpress UI KitApr 06, 20226.0.0DownloadDownloadJan 19, 20225.2.0DownloadOct 18, 20195.1.1DownloadAug 22, 20195.1.0DownloadApr 20, 20195.0.0Download

Anatomy#

Image illustrating through labels the component parts of a status light, including its dot and label.

Options#

Key example of a status light with its label, which is required to be part of the status light.

Label#

Status lights should always include a label. Color alone is not enough to communicate the status.

Five key examples of status lights using semantic colors to convey meaning. First example, informative semantic meaning, blue dot, label Active. Second example, neutral semantic meaning, gray dot, label Paused. Third example, positive semantic meaning, green dot, label Approved. Fourth example, notice semantic meaning, orange dot, label Needs approval. Fifth example, negative semantic meaning, red dot, label Rejected.

Semantic variants#

When status lights have a semantic meaning, they use semantic colors. The status dots use semantic color 400. Use these variants for the following statuses:

  • Informative (e.g., active, in use, live, published)
  • Neutral (e.g., archived, deleted, paused, draft, not started, ended)
  • Positive (e.g., approved, complete, success, new, purchased, licensed)
  • Notice (e.g., needs approval, pending, scheduled, syncing, indexing, processing)
  • Negative (e.g., error, alert, rejected, failed)
Eight key examples of status lights using non-semantic colors to categorize items. First example, indigo dot, label Email campaign. Second example, celery green dot, label Blog posts. Third example, magenta dot, label Instagram. Fourth example, yellow dot, label Twitter. Fifth example, fuchsia dot, label Facebook. Sixth example, seafoam dot, label Monitoring campaign. Seventh example, chartreuse dot, label Landing page. Eighth example, purple dot, label Display ad campaign.

Non-semantic variants#

When status lights are used to color code categories and labels that are commonly found in data visualization, they use label colors. These dots use label color 400. The ideal usage for these is when there are 8 or fewer categories or labels being color coded.

Examples of the four sizes of status lights, small, medium, large, extra-large, shown ascending from smallest to largest. All examples show a green color, positive semantic variant status light, label Approved.

Size#

Status lights come in four different sizes: small, medium, large, and extra-large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

Key example of a disabled state status light. Label, Approved.

Disabled#

A status light in a disabled state shows that a status exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a status may become available later.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Valuelabeltext–variantinformative / neutral / positive / notice / negative / indigo / celery / chartreuse / yellow / magenta / fuchsia / purple / seafoaminformativesizesmall / medium / large / extra-largemediumis disabledyes / nono

Behaviors#

Key example of a status light where the label wraps to a second line. The dot stays horizontally aligned to the first line of label text. The status dot is purple, label Display ad campaign.

Text overflow#

When the text is too long for the horizontal space available, it wraps to form another line.

Usage guidelines#

Use the appropriate variation#

Semantic status lights should never be used for color coding categories or labels, and vice versa.

do
Key example of a set of three status lights correctly using categorical colors for categories. Purple dot, label Chrome. Celery green dot, label Firefox. Fuchsia dot, label Safari.
dont
Key example of a set of three status lights incorrectly using semantic colors for categories. Red dot, label Chrome. Green dot, label Firefox. Orange dot, label Safari.

Status light text#

A status light should always include a label with text that clearly communicates about the kind of status being shown. Do not change the text color to match the dot.

dont
Key example of a status light where the label text has incorrectly been changed from gray to green to match the green dot. Label, Approved.

Internationalization#

Key example showing three status lights in Arabic. The status light dot is placed on the right side of the label text, and status lights are right aligned with the text.

RTL#

For RTL (right-to-left) languages, the layout of the status light is mirrored. The dot is placed on the right side of the text.

Theming#

A theme is an intentional, systematic customization of Spectrum. It has unique visual attributes. For more information, view Theming.

Key example of a status light in the Spectrum for Adobe Express theme. Positive variant, label Approved.

Spectrum for Adobe Express#

Status lights remain the same across themes.

Changelog#

DateNumberNotesApr 06, 20226.0.0
  • Updated all colors to 6.0.0
Jan 19, 20225.2.0
  • Added size option
Oct 18, 20195.1.1
  • Removed guideline about label color order and color vision deficiency for non-semantic status lights
Aug 22, 20195.1.0
  • Added text overflow behavior
Apr 20, 20195.0.0
  • This component is now individually versioned (individual versions of existing components start at 5.0.0)
  • Added RTL (right-to-left) guidelines

Design checklist#

check

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

check

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

check

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

check

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

check

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

unchecked

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

check

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

N/A

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

check

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

N/A

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

unchecked

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

check

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.