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

StatusIndicator includes a container StatusIndicator component and the following subcomponents which can be composed in a variety of ways: StatusIndicator.Label and StatusIndicator.Icon.

A basic StatusIndicator with a StatusIndicator.Label will render text with a gray background and low emphasis.

import React from 'react';

import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';

export default () => {
  return (
    <StatusIndicator>
      <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
    </StatusIndicator>
  );
};

Emphasis

Set the emphasis prop of StatusIndicator to adjust the contrast between the text and background color. Emphasis is typically used to convey more visual urgency.

emphasis accepts high or low.

import React from 'react';

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

const parentContainerStyles = createStyles({
  gap: system.space.x4,
});

export default () => {
  return (
    <Flex cs={parentContainerStyles}>
      <StatusIndicator emphasis="high">
        <StatusIndicator.Icon icon={uploadCloudIcon} />
        <StatusIndicator.Label>High Emphasis</StatusIndicator.Label>
      </StatusIndicator>
      <StatusIndicator emphasis="low">
        <StatusIndicator.Icon icon={uploadCloudIcon} />
        <StatusIndicator.Label>Low Emphasis</StatusIndicator.Label>
      </StatusIndicator>
    </Flex>
  );
};

Icon

Use StatusIndicator.Icon to add an icon to the StatusIndicator as a visual decorator. The position of the icon may be adjusted depending on where you place it in the markup.

import React from 'react';

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

const parentContainerStyles = createStyles({
  gap: system.space.x4,
});

export default () => {
  return (
    <Flex cs={parentContainerStyles}>
      <StatusIndicator>
        <StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
        <StatusIndicator.Label>Unpublished</StatusIndicator.Label>
      </StatusIndicator>
      <StatusIndicator variant="positive">
        <StatusIndicator.Label>published</StatusIndicator.Label>
        <StatusIndicator.Icon aria-label="published" icon={uploadCloudIcon} />
      </StatusIndicator>
    </Flex>
  );
};

Overflow

We strongly discourage using text in a StatusIndicator which will cause it to exceed its maximum width of 200px. In situations where this cannot be avoided and text must be overflowed, we suggest wrapping StatusIndicator in an OverflowTooltip and applying tabIndex={0} to it so the overflowed text is accessible via keyboard and mouse. You may also override the default maxWidth of StatusIndicator via style props.

import React from 'react';

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

const statusIndicatorStyles = createStyles({
  maxWidth: calc.add(system.space.x20, system.space.x4),
});

export default () => {
  return (
    <OverflowTooltip>
      <StatusIndicator tabIndex={0} cs={statusIndicatorStyles}>
        <StatusIndicator.Icon icon={uploadCloudIcon} />
        <StatusIndicator.Label>
          Your workbook is currently in process of saving
        </StatusIndicator.Label>
      </StatusIndicator>
    </OverflowTooltip>
  );
};

Variants

Set the variant prop of StatusIndicator to adjust its background color. variant accepts the following values:

• gray
• orange
• blue
• green
• red
• transparent

The background color dictated by the variant will be dark or light based on the emphasis.

import React from 'react';

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

const styleOverrides = {
  parentContainerStyles: createStyles({
    gap: system.space.x4,
    flexDirection: 'column',
  }),
  innerContainerStyles: createStyles({
    gap: system.space.x4,
  }),
};

export default () => {
  return (
    <Flex cs={styleOverrides.parentContainerStyles}>
      <Flex cs={styleOverrides.innerContainerStyles}>
        <StatusIndicator>
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator variant="caution">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator variant="info">
          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator variant="positive">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator variant="critical">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator variant="transparent">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
      </Flex>
      <Flex cs={styleOverrides.innerContainerStyles}>
        <StatusIndicator emphasis="high">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator emphasis="high" variant="caution">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator emphasis="high" variant="info">
          <StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator emphasis="high" variant="positive">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator emphasis="high" variant="critical">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
        <StatusIndicator emphasis="high" variant="transparent">
          <StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
          <StatusIndicator.Icon icon={uploadCloudIcon} />
        </StatusIndicator>
      </Flex>
    </Flex>
  );
};

Custom Styles

Status Indicator and its subcomponents support custom styling via the cs prop. For more information, check our “How To Customize Styles”.

Component API

<StatusIndicator variant="info">
  {Child components}
</StatusIndicator>

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)

<StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>

<Text typeLevel="body.small">Small body text</Text>

<Text variant="error" typeLevel="subtext.large">Error text</Text>

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)

<StatusIndicator.Icon icon={uploadCloudIcon} />

import {handleCsProp} from '@workday/canvas-kit-styling';
import {mergeStyles} from '@workday/canvas-kit-react/layout';

// ...

// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same
// function signature, but adds support for style props.

return (
 <Element
   {...handleCsProp(elemProps, [
     myStyles,
     myModifiers({ size: 'medium' }),
     myVars({ backgroundColor: 'red' })
   ])}
 >
   {children}
 </Element>
)

Accessibility Guidelines

How Status Indicators Impact the Accessible Experience?

Status Indicators do not have any keyboard interaction because they represent static text on the UI. However, when the text inside Status Indicator is truncated (overflow), users must be able to display the full text using a keyboard only.

When using icons in Status Indicators, the icons may be considered decorative in most cases and will not require any text alternatives for screen readers. In cases where the icon communicates something about the status that is not conveyed by the text of the status, then the icon will need to be augmented with a text alternative.

Keyboard Interaction

When the Status Indicator text overflows, it must have a focus indicator that is highly visible against the background and against the non-focused state. Refer to Accessible Colors for more information.

Status Indicator with overflow must support the following keyboard interactions:

• Tab: focus the status indicator, tooltip displays when status indicator is focused
• Esc: dismiss tooltip

Design Annotations Needed

No annotations required for Status Indicators

Implementation Markup Needed

• Multiple Status Indicators can be grouped together using unordered list markup, <ul> and <li> elements.
• Status Indicator with overflow must have a tabindex attribute and an OverflowTooltip to display the full text on hover and keyboard focus.
• [Included in component] Decorative <svg> icons are hidden from assistive technology with role=“presentation” and focusable=“false”

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.

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 color variations to support both high and low emphasis indicators (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 a status associated with 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.
• Status Indicator text should not wrap and instead stretch to fill the container or screen margins. When the max-width is reached, text is truncated. Try to avoid truncation from happening in the first place by keeping text short, direct, and preferably a single word.
• Match semantic background colors with appropriate status text. For example, use red to indicate missing actions like “Not Submitted” or green for completed actions like “Published” or “Complete”.
• When competing with other visual labeling 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.

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.
• Consider using a read-only Pill to communicate additional metadata tags about an object, as opposed to a status.
• Status Indicators are not interactive components. If a status needs to be interactive, consider using a Hyperlink or Tertiary Button.

Text Overflow

Text in Status Indicators should never wrap to a second line. Instead, truncate Status Indicator text if they reach the screen/container margins. In general, try to avoid this by keeping text concise.

Keep Labels Concise

Try to keep Status Indicator labels short and to the point. Rule of thumb - keep it under three words.

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 distractions 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.

High Emphasis Status Indicators

Reserve high-emphasis indicators for when there are few Status Indicators in the UI and more emphasis is required to draw attention.

Low Emphasis Status Indicators

Use low-emphasis indicators in instances where they may dominate the screen, such as in a table when they appear alongside many other indicators.

Icons

Icons can be displayed to the left of high or low emphasis Status Indicator text.

Transparent Status Indicators

Reserve transparent Status Indicators to communicate status on top of imagery and video.

Dragon Fruit Status Indicators

Reserve dragon fruit status indicators to communicate auto or AI generation of content.

API Guidelines

Coming soon!

Accessibility Guidelines

Refreshed mobile guidelines will be coming soon!

Content Guidelines

• Keep status text short, direct, and preferably a single word. Keep in mind that Status Indicator containers can stretch to screen or container margins before truncation begins.
• Avoid creating status labels that require more characters than the container allows.
• Status Indicator text should never wrap.
• Use status labels that are relatable or familiar to your user and the task at hand.

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 color variations to support both high and low emphasis indicators (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 a status associated with 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.
• Status Indicator text should not wrap and instead stretch to fill the container or screen margins. When the max-width is reached, text is truncated. Try to avoid truncation from happening in the first place by keeping text short, direct, and preferably a single word.
• Match semantic background colors with appropriate status text. For example, use red to indicate missing actions like “Not Submitted” or green for completed actions like “Published” or “Complete”.
• When competing with other visual labeling 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.

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.
• Consider using a read-only Pill to communicate additional metadata tags about an object, as opposed to a status.
• Status Indicators are not interactive components. If a status needs to be interactive, consider using a Hyperlink or Tertiary Button.

Text Overflow

Text in Status Indicators should never wrap to a second line. Instead, truncate Status Indicator text if they reach the screen/container margins. In general, try to avoid this by keeping text concise.

Keep Labels Concise

Try to keep Status Indicator labels short and to the point. Rule of thumb - keep it under three words.

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 distractions 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.

High Emphasis Status Indicators

Reserve high-emphasis indicators for when there are few Status Indicators in the UI and more emphasis is required to draw attention.

Low Emphasis Status Indicators

Use low-emphasis indicators in instances where they may dominate the screen, such as in a table when they appear alongside many other indicators.

Icons

Icons can be displayed to the left of high or low emphasis Status Indicator text.

Transparent Status Indicators

Reserve transparent Status Indicators to communicate status on top of imagery and video.

Dragon Fruit Status Indicators

Reserve dragon fruit status indicators to communicate auto or AI generation of content.

API Guidelines

Component Definition

@Composable
fun StatusIndicatorUiComponent(
    modifier: Modifier = Modifier,
    label: String,
    type: StatusIndicatorType,
    emphasis: StatusIndicatorEmphasis = StatusIndicatorEmphasis.HIGH, icon: @Composable() -> [Unit]

Status indicator ui component

Parameters

Accessibility Guidelines

Refreshed mobile guidelines will be coming soon!

Content Guidelines

• Keep status text short, direct, and preferably a single word. Keep in mind that Status Indicator containers can stretch to screen or container margins before truncation begins.
• Avoid creating status labels that require more characters than the container allows.
• Status Indicator text should never wrap.
• Use status labels that are relatable or familiar to your user and the task at hand.