Intro

The status indicator uses a filled icon to visualize a single value. Unlike the progress indicator or the radial micro chart, the indicator provides the user with a meaningful association through its use of icons.

Variety of status indicators
Variety of status indicators

Usage

Use the status indicator if:

  • You want to display a single value with an icon that describes its context.
  • You want to display a single value that can change in real time without requiring a page reload.

Do not use the status indicator if:

  • You want to display a single value in a table. Use the progress indicator or radial micro chart instead.
  • You want to show a rating. Use the rating indicator instead.
  • The status indicator is decorative and does not provide the user with a meaningful association.

Responsiveness and Adaptiveness

The status indicator is fully responsive.

Types

Linear Fill

If the icon only shows one fill area, show a fill level.

Status indicators with linear fill.
Status indicators with linear fill.

Sequential Fill

If the icon has more than one fill area, fill them sequentially.

Status indicators with sequential fill.
Status indicators with sequential fill.

Solid Fill

If the icon is very small, always provide a solid fill. You can use semantic colors to show the state.

Status indicators with solid fill - states represented by different semantic colors.
Status indicators with solid fill - states represented by different semantic colors.

Behavior and Interaction

You can set a click event for the status indicator. If the status indicators are grouped, you can set a click event for the individual status indicators or for the entire group.

Guidelines

The status indicator can be used within (but is not restricted to) the following controls:

Warning
Only use the predefined icons which can be found in the Visual Design Specification.

Thresholds

You can set one or more thresholds for each status indicator. Apply a color for each threshold; the color changes when a threshold has been passed. Only use thresholds and semantic colors if they support the use case. Do not use them for decorative purposes.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls

Implementation