Status
The status of the component
Ready for use!
Figma component
A link to the Figma library where the component lives.
Repository
A link to the repo where the component lives.
Code Sandbox
undefined
Anatomy
Default
- Status Glyph - represents four semantic statuses: negative, information, positive, warning/neutral.
- Help text - label capturing the status in text format.
Hover
- Hover state - when a user hovers over the status indicator, the background layer is changed to reflect.
Tooltip
- Tooltip - this is shown and provides the user with additional, extra information on reveal after hovering for more than 3 seconds.
Usage
Table Only Placement
The status indicator has been designed specifically for our table component, and as such we recommend avoiding its use in non-table elements.
Do
Use the status indicator within tables, specifically making use of the “status-indicator” property in the In-Table Cell. Simply switch out the table cell to the In-Table Cell to nest the status indicator in your table UI experiences.
Don't
Use the status indicator outside of table experiences. The component is composed in a way that may interfere/clash with other components due to it’s spacing/padding make up.
Caution
Rather than our status indicator, consider making use of the badge component to facilitate this intended functionality.
Sparing Use
The status indicator is designed to grab the attention of the user when placed in a table. This creates noise and when overused, could distract users from important pieces of information and overwhelm the given interface.and,
Column Uniformity
Similar to the above guidance on refraining from overuse of the status indicator within tables, when the component is used within a table row, it should be used for each element. In a sense, when using a status indicator in a table column, it is “all or nothing”.
Do
Apply status indicators in a uniform manner to a given table column.
Don't
Avoid using text label (or any other component) within the same column that’s holding a status indicator.
Clear Distinction of Status
Within the status indicator, we make use of semantic statuses (positive, neutral/warning, negative and information). Statuses and their labels should align with this and be clear.
Do
Apply labelling for each semantic status consistently.
Don't
Avoid using different status labels against the same semantic status glyph. Additionally, prevent using long status labels for readability and avoid the application of truncation to your status label.
Content
Semantic Status Usage
Below is guidance on that most applicable use of an interaction to to an associated semantic status. This is not comprehensive overview of all the use cases but might as a guide.
|
Key |
Interaction |
|---|---|
|
Positive |
Active, Ready, In-use, Available, Connected, Enabled |
|
Neutral/Warning |
In-progress, Work-in-progress, Incomplete, Processing, On-hold |
|
Negative |
Deleted, Error, Failed, Blocked, Invalid. Terminated |
|
Information |
Alert, System-update. Notice, Status, Notification, Advisory |
Related Components