Skip to main contentCarbon Design System

Status indicators

Status indicators are an important method of communicating severity level information to users. Different shapes and colors enable users to quickly assess and identify status and respond accordingly.

Overview

An indicator highlights a page element and informs the user of something that needs the user’s attention. Often, the indicator will denote that there has been a change to a particular item. They are frequently used to signal validation errors or notifications, changes, or updates. They can also be used on their own. Indicators are visual cues intended to attract the user’s attention to a piece of content or UI element that is dynamic in nature.

In this pattern we explore:

  • Choosing the best status indicators for your context
  • The different status indicator variants
  • What elements they are comprised of and how each element works to communicate

Choosing for context

In the UI landscape, examples of status indicators are everywhere. However this pattern will focus less on the components or patterns in which indicators tend to appear (notifications, inline errors, dashboards, and so on) and more on the urgency of the communication.

For ease of use, status indicators can be classified into levels of severity such as high, medium, and low attention. See more information on choosing between alias icons and outlined versus filled icons in the Status shapes section below.

Consolidated statuses

When multiple statuses are consolidated, use the highest-attention color to represent the group. For example, if the statuses of underlying components are green, yellow, and red, the consolidated indicator is red.

Cognitive load

Don’t use status indicators when no user action is necessary and status information is not important enough to highlight. Use plain text instead to avoid the overuse of status indicators. While we won’t go as far a prescribing a maximum number, more than 5 or 6 indicators begins to tax a user and makes it difficult to focus.

High attention

These indicators signal that user action is needed immediately—that is, there is an irregularity in the system, something malfunctioned, or a user needs to confirm a potentially destructive action. Some examples include alerts, exceptions, confirmations, and errors.

IconNameTokenDescription & usage
Failure
$support-error
Indicates a process failure that needs immediate attention
Used for: failed processes, emergencies, urgent alerts
Warning
$support-error
Indicates an error (often inline) that needs immediate attention
Used for: warnings, errors, alerts, failure
Warning alt
$support-error
Carries the same meaning as ‘Warning’
Misuse
$support-error
Indicates unavailability, an incorrect use case (especially in usage guidance), or a run that has been cancelled
Used for: incorrect usage, unavailability, cancellation
Caution major
Orange 40/Orange 60 outline, Orange 40
Indicates a threshold has been breached; alerts a user before a critical event is triggered (only used in conjunction with ‘Caution’)
Used for: major caution, serious situations, critical instability
Caution minor
$support-warning/Yellow 60 outline, $support-warning
Indicates the existence of a non-service affecting fault condition requiring corrective action to prevent a more serious fault
Used for: minor caution, prevention, instability

Medium attention

Use these indicators when no immediate user action is required or to provide feedback to a user action. Some examples include acknowledgements and progress indicators.

IconNameTokenDescription & usage
Undefined
Purple 60, Purple 50
Indicates a value that is outside of an acceptable range or formatted incorrectly
Used for: experimental work, outliers
Normal
$support-success
Indicates stability or the clearing of one or more reported alarms; implies no issues are present
Used for: success, completion, stability, active states
Normal alt
$support-success
Carries the same meaning as ‘Normal’ but is more often used in data tables and confined spaces
Success
$support-info
Indicates success at the end of a process (usually used as an interactive state within Carbon components, hence the color change)
Used for: success, completion
In progress
$support-info
Indicates a process has started but has not finished running (icon will be replaced by ‘checkmark’ or ‘warning’ icon when the status of the job changes)
Used for: unfinished, running processes
Incomplete
$support-info
Indicates a stepped process has begun but is not yet finished (icon appears in Carbon’s Progress Indicator component)
Used for: incomplete tasks
Not started
$support-info
Indicates that a job or step (in Carbon’s Progress Indicator) has not yet been started
Used for: upstarted tasks or disabled processes
Pending
Gray 60, Gray 50
Indicates a job has started but can not be scheduled due to insufficient resources
Used for: indefinite holds

Low attention

Use these indicators when something is ready to view, for system feedback, or to signify that something has changed since the last interaction. Some examples include tooltip triggers that offer explanatory or added information, and passive notifications.

IconNameTokenDescription & usage