Status

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.

Usage

Status indicators are visual cues intended to attract the user’s attention to a piece of content or UI element that is dynamic in nature. Use status indicators to:

Highlight a page element and inform users of something that needs their attention
Denote that a change has been made to a particular item
Signal validation errors or notifications, changes, updates, etc

Color usage

The Cegid Design System includes color usage for status components.

The brightness property of a status component can be set to dark or light.

Semantic status components can have one of the following colors: critical, warn, success, info

Data visualization status components can have one of the following color: primary, secondary, neutral, lime, teal, indigo, deep purple, pink, blueberry, lychee, plum, tomato, bananabread.

Types

**Semantic status **

Data visualization status

Anatomy and content

Icon

A status can have an icon or not. If there is an icon, the icon should be placed on the left side of the status, the text is on the right side.

Choose the relevant icon depending on the case.

Text

The status text is used to give information regarding the state of the element to which the status is associated

The status text should be clear and concise.

Behaviour and interaction

Status components are usually associated with a specific element on the interface that requires a user’s attention

Status components may also indicate that an action by the user is needed.

Responsiveness and density

The default properties of a status component are the following:

Width: Hugs the content

Height: Fixed (24px)

Radius: 6px

Padding: sides 8px, top and bottom 4px