Status

Usage

Status component serves as an indicator of the system status inside applications. It consists of an icon and text explaining the status - there should be consistent use of the status throughout the application - statuses are therefore classified into groups when the actions they represent are similar.

Best Practices

• There are no special restrictions where the status should be placed on the user interface, the placement just needs to be consistent throughout the application

• Use status labels only to convey the change of the system status depending on the workflow - for example, to indicate campaign or opportunity status change

• For any contextual application statuses that are not defined here, the designer should understand the level of action and chose one of the predefined groups where the status can be put in and displayed

• Intermediate changes such as “Cancelling” shouldn’t be displayed as a status; use message instead

• Always use tooltip next to icon status

Status Groups

Variations

The statuses can be shown in three different variations, to accommodate different kinds of layouts.

Default: Icon and Name

To be used as most preferred option, as some statuses are quite hard to be understood only by an icon.

Save space: Icon Only

To be used with explanatory default tooltip on hover - for example, when there is a real space problem in a table. They should be placed away from the table row actions to not create confusion.

Emphasis: Icon, Name and Background

To be used only when there is a product requirement to really emphasise the status.

Sizing