Status Indicator

Anatomy

1. Text: Bold, single-line, title-case text is used to recognize a status quickly.
2. Background: Color is used to help users quickly recognize the meaning of a status across applications. Each background has two emphasis variations to support both high and low emphasis contrast (see Variations below).
3. System Icon: Optional visual to further emphasize and support status.

Usage Guidance

• A Status Indicator is a way of making an element on the page stand out to inform the user that there is something special about it that warrants the user’s attention.
• Status Indicators are non-interactive visual cues that highlight a change in the system or task. They are read-only, passive elements that should not take the place of an action or button.
• Although Status Indicators are commonly used to signal validation feedback or notifications, they can also be used on their own, such as within a Table.
• Status Indicators have a max-width of 200px so that users can easily scan and recognize status quickly. Status text should be short, direct, and preferable a single word.
• Status Indicator text should not wrap.
• In general, try to avoid relying on overflow solutions like tooltips - instead, keep text concise to avoid truncation from happening in the first place.
• Combine background color variation with logical status text.
• When competing with other visual labelling elements, status indicators can be distracting. Use them in moderation, and consider how many (if any) indicators should be used in your design.

When to Use

• To attract user attention to a particular piece of content or UI element whose status has changed or may change in the future.
• Use low-emphasis indicators in instances where they may dominate the screen, such as in a table when they appear alongside many other Indicators.
• Use high-emphasis Status Indicators sparingly. Reserve these to pair with headers or page section titles.
• Reserve transparent Status Indicators to communicate status on top of imagery and video.

When to Use Something Else

• If one or two words is not enough to convey the status, consider using body text or a header with detail text to communicate the status.
• If a status is less important to the user or task, consider using body text or a header to communicate the status.
• Status Indicators are not interactive components. If a status needs to be interactive, consider using a Hyperlink or Tertiary Button.

Variations

Status Indicators have a background color to help users recognize the meaning of a status across applications. Each indicator background type has two variations, one to support both high and low emphasis indicators. Keep in mind that Status Indicators can increase the amount of visual noise or add unwanted emphasis when used repetitively. Take this into consideration when selecting your background variation.

The examples below outline the suggested purpose of each indicator color and variation.

Examples

Basic Example

import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const parentContainerStyles = createStyles({
  '& > *': {
    margin: system.gap.sm,
  },
});

export default () => {
  return (
    <div className={parentContainerStyles}>
      <StatusIndicator label="unpublished" type={StatusIndicator.Type.Gray} />
      <StatusIndicator label="submitted" type={StatusIndicator.Type.Orange} />
      <StatusIndicator label="in progress" type={StatusIndicator.Type.Blue} />
      <StatusIndicator label="published" type={StatusIndicator.Type.Green} />
      <StatusIndicator label="failed" type={StatusIndicator.Type.Red} />
      <StatusIndicator label="normal" type={StatusIndicator.Type.Transparent} />
    </div>
  );
};

Note that the type prop is required (there is no default value). type accepts the following values:

Emphasis

Set the emphasis prop of the Status Indicator to convey varying levels of emphasis. emphasis accepts the following values:

• StatusIndicator.Emphasis.High (Default)
• StatusIndicator.Emphasis.Low

import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const parentContainerStyles = createStyles({
  '& > *': {
    margin: system.gap.sm,
  },
});

export default () => {
  return (
    <div className={parentContainerStyles}>
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="unpublished"
        type={StatusIndicator.Type.Gray}
      />
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="submitted"
        type={StatusIndicator.Type.Orange}
      />
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="in progress"
        type={StatusIndicator.Type.Blue}
      />
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="published"
        type={StatusIndicator.Type.Green}
      />
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="failed"
        type={StatusIndicator.Type.Red}
      />
      <StatusIndicator
        emphasis={StatusIndicator.Emphasis.Low}
        label="normal"
        type={StatusIndicator.Type.Transparent}
      />
    </div>
  );
};

Note that the High and Low emphasis levels are identical for Transparent Status Indicators.

Icon

Set the icon prop of the Status Indicator to a Canvas System Icon to display that icon beside the label.

import React from 'react';

import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
import {cloudArrowUpIcon} from '@workday/canvas-system-icons-web';

export default () => {
  return (
    <StatusIndicator icon={cloudArrowUpIcon} label="published" type={StatusIndicator.Type.Green} />
  );
};

Max Width

By default, the maximum width of a Status Indicator is 200px. When the text in the StatusIndicator exceeds the max width, it will be truncated with an ellipsis. This maxWidth can be customized.

Avoid truncation wherever possible by using shorter text in Status Indicators. In the case where truncation is necessary, you should use an OverflowTooltip. For the full text to be accessible when you do this, you should make the tooltip focusable with tabIndex.

import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';
import {OverflowTooltip} from '@workday/canvas-kit-react/tooltip';
import {createStyles} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const statusIndicatorsStyles = createStyles({
  '& > *': {
    margin: system.gap.sm,
  },
});

export default () => {
  return (
    <div className={statusIndicatorsStyles}>
      <StatusIndicator
        label="Longer Than Normal Ellipsized Status"
        type={StatusIndicator.Type.Blue}
        maxWidth={250}
      />
      <OverflowTooltip>
        <StatusIndicator
          label="Overflow Tooltip On Hover/Focus Status"
          type={StatusIndicator.Type.Green}
          tabIndex={0}
        />
      </OverflowTooltip>
    </div>
  );
};

Component API

Content Guidelines

• Keep status text short, direct, and preferably a single word. Keep in mind that Status Indicator containers have a maximum width of 200px before text truncation begins.
• Avoid creating status labels that require more characters than the max-width allows for.
• Status Indicator text should never wrap.
• Use status labels that are relatable or familiar to your user and the task at hand.
• When writing content for Status Indicators, refer to our Content Style Guide.