Status Indicator
Status indicators usually communicate to user where they are (or system is) in the process flow.
Table of Contents
Edit this section, Opens in new windowOverview
Status indicators usually communicate to user where they are (or system is) in the process flow.
Progress is displayed via differentiated status symbols, each denoted with a specific color code.
Usage
Principles
Use status indicator to:
- indicate progress of an ongoing task;
- describe the status of process flow;
- describe the state of an action and whether any other action is required;
Types
Active status indicator can be used to denote active state state of a process flow or an action.
Active status indicator also may be used to signal a new state of an item/object.
Success status indicator can be used to denote success state of a process flow or an action.
Success status indicator also may be used to signal a available state of an item/object.
In progress status indicator can be used to denote progress state state of a process flow or an action.
In progress status indicator also may be used to signal a busy state of an item/object.
In progress status indicator can be used to denote error state state of a process flow or an action.
In progress status indicator also may be used to signal a retired state of an item/object.
In progress status indicator can be used to denote paused state state of a process flow or an action.
In progress status indicator also may be used to signal a on vacation state of an item/object.
Status indicator can be used without descriptive text as well.
Refer to the Accessibility section for more info on how to make it accessible
Anatomy
- Status indicator circle
- Description text (optional)
- Status indicator circle
Specs
If descriptive text is used, it is padded 8px on the right side
Status indicator circle is 12px by 12px