Status Indicators help the user quickly identify the status of a task, action, or page element.
- Text: Bold, single-line, uppercase text is used to recognize a status quickly.
- 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).
- Icon: Optional, for emphasis and further supporting status.
- 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.
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.
Note that the
type prop is required (there is no default value).
type accepts the following
|Basic, general status. No action required.|
|Signifies alerts, that a user must take action, or that something requires attention.|
|Signifies an item in progress, an update, or a current status.|
|Signifies success, completion, or celebration.|
|Signifies an error or issue, or removal or destruction.|
|General status and related information intended for use on top of imagery, video, or graphics.|
emphasis prop of the Status Indicator to convey varying levels of emphasis.
accepts the following values:
Note that the
Low emphasis levels are identical for
Transparent Status Indicators.
icon prop of the Status Indicator to a Canvas System Icon to display that icon beside the
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
Undocumented props are spread to the outermost element rendered by Status Indicator.
|The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.|
|The emphasis of the StatusIndicator. Accepts `High` or `Low`.|
|The maxWidth of the container before it truncates|
|The text of the StatusIndicator.|
|The icon of the StatusIndicator.|
- 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.
- 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