Version 5.1.1

Status light

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.

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.

Key examples of status lights using semantic colors to convey meaning. The first example is a blue dot with the label "active", second is a gray dot with the label "paused", third is a green dot with the label "approved", fourth is an orange dot with the label "needs approval", and fifth is a red dot with the 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)
Key examples of status lights using non-semantic colors to categorize items. The first example is an indigo dot with the label email campaign, second is a celery green dot with the label blog posts, third is a magenta dot with the label Instagram, fourth is a yellow dot with the label Twitter, fifth is a fuchsia dot with the label Facebook, sixth is a seafoam dot with the label monitoring campaign, seventh is a chartreuse dot with the label landing page, eighth is a purple dot with the 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.

Key example of a disabled status light.

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 Value
label
text
variant
info /neutral / positive / notice / negative / indigo / celery / chartreuse / yellow / magenta / fuchsia / purple / seafoam
info
is disabled
yes / no
no

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.

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.

Key example of three status lights correctly using categorical colors for categories.
Key example of three status lights incorrectly using semantic colors for categories.

Status light text#

Status lights should always include text with the status dot. Do not change the text color to match the dot.

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

Internationalization#


Key example showing three status lights in the right-to-left language use case. The status light dot is placed on the right side of the label text, and status lights are right aligned.

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.

Changelog#


DateNumberNotes
Oct 17, 20195.1.1
  • Removed guideline about label color order and colorblindness for non-semantic status lights
Aug 22, 20195.1.0
  • Added text overflow behavior
Apr 19, 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#


All interactive states

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

Multiple options

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

All color themes

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

All platform scales

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

Defined behaviors

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

Usage guidelines

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

Accessible contrast

Follows WCAG 2.0 standards for contrast (AA).

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.

Downloadable UI kit

Includes a downloadable XD file that has been generated by code and shows multiple variations, states, color themes, and scales.

Design tokens

All design attributes (color, typography, layout, animation, etc.) are included in Spectrum DNA.