Status Indicator

Status Indicators help the user quickly identify the status of a task, action, or page element.

GitHubStorybook
yarn add @workday/canvas-kit-react
Sources
GitHubStorybook
Install
yarn add @workday/canvas-kit-react

Anatomy

Image of a Card with annotation markers.

  1. Text: Bold, single-line, uppercase text is used to recognize a status quickly.
  2. Background: Color is used help users quickly recognize the meaning of a status across applications. Each background has two color variations to support both high and low emphasis indicators (see Variations below).
  3. Icon: Optional, for emphasis and further supporting 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 that system or task has changed or that it has the functionality to change. They are read-only, passive elements that should never take the place of an action or button.
  • Although Status Indicators are used quite frequently to signal validation feedback or notifications, they can also be used on their own.
  • Status Indicators have a max-width of 200px so that users can easily scan and recognize a status quickly. To further support this, status text should be short, direct, and preferably a single word.
  • Status Indicator text should never wrap.
  • In extremely rare cases that you require more than the maximum 200px, the status text will be truncated and must be supported by an Overflow Tooltip to make it fully accessible.
  • Combine indicator background color variation with logical status text.
  • Status Indicators can introduce noise and clutter to your overall interface. When competing with other visual labelling elements, status indicators can be distracting. Use them in moderation, and consider how many (if any) indicators to use in your design.

When To Use

  • When you want to attract users' attention to a particular piece of content or UI element whose status has changed or can 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 Status Indicators.
  • Use high-emphasis Status Indicators sparingly. Reserve these to pair with headers or page sections.
  • 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 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 focusable or 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

unpublishedsubmittedin progresspublishedfailednormal

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

TypeSuggested Purpose
StatusIndicator.Type.GrayBasic, general status. No action required.
StatusIndicator.Type.OrangeSignifies alerts, that a user must take action, or that something requires attention.
StatusIndicator.Type.BlueSignifies an item in progress, an update, or a current status.
StatusIndicator.Type.GreenSignifies success, completion, or celebration.
StatusIndicator.Type.RedSignifies an error or issue, or removal or destruction.
StatusIndicator.Type.TransparentGeneral status and related information intended for use on top of imagery, video, or graphics.

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
unpublishedsubmittedin progresspublishedfailednormal

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.

published

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.

Longer Than Normal Ellipsized StatusOverflow Tooltip On Hover/Focus Status

Props

Undocumented props are spread to the outermost element rendered by Status Indicator.

NameTypeDefaultDescription
type*StatusIndicatorTypeThe type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.
emphasisStatusIndicatorEmphasis | undefinedStatusIndicatorEmphasis.HighThe emphasis of the StatusIndicator. Accepts `High` or `Low`.
maxWidthnumber | undefined200The maxWidth of the container before it truncates
label*stringThe text of the StatusIndicator.
iconCanvasSystemIcon | undefinedThe icon of the StatusIndicator.

Accessibility Guidelines

  • The status text and background color must meet the minimum contrast requirement.
  • The color schemes for the Status Indicators must match all other Status Indicators of the same text description. Failure to do so is using color as the sole means for communicating information to users.
  • If an icon is used alongside the status text, the icon must not provide any text alternative for screen readers. The adjacent text will serve as the accessible name and the icon may be considered redundant or decorative.
  • In rare cases that you require more than the maximum 200px, the status text will be truncated and must be supported by an Overflow Tooltip to make it fully accessible.

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.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section