> For the complete documentation index, see [llms.txt](https://hinahirani.gitbook.io/ui-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hinahirani.gitbook.io/ui-guide/components/status.md).

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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbrf_GMIhGJocAF5c2%2F-MAbsZiGh_kk6LHHaHVN%2FStatus%20danger.png?alt=media\&token=771b35a1-c297-46d9-843b-2ac644e92b1c)

### 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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbrf_GMIhGJocAF5c2%2F-MAbsbqOyK9ubjSrYQm6%2FStatus%20do's%20and%20don'ts.png?alt=media\&token=acf4d3ac-19e1-4006-9980-70217ca571e1)

### Status Groups

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbrf_GMIhGJocAF5c2%2F-MAbsOS9c-Sp0bHvF8iX%2FStatus.png?alt=media\&token=f8c8c5bd-ffc8-4a29-af29-c383fb25f489)

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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbrf_GMIhGJocAF5c2%2F-MAbsg0rljX2dkDjZESo%2FStatus%20Icon.png?alt=media\&token=2de5bfe4-ccde-47c5-a82f-b74f1aef84c5)

**Emphasis: Icon, Name and Background**

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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MAbrf_GMIhGJocAF5c2%2F-MAbsRACzTCMyrnjP7Ad%2FStatus%20options.png?alt=media\&token=3e1d10f9-783c-4145-b9b3-abaf8cb0f4fa)

### Sizing