Status is used to describe the condition of an object and uses color and a label to indicate the severity level to users.
Overview
A status should be clearly associated with an object to inform the user that something needs their attention. Statuses are used to signal broad operational states — like errors, changes, or updates — or more granular states like whether a user profile is active or inactive.
Status benefits users by:
- Using established color and label patterns so that users can quickly identify their status or importance level.
- Being positioned to clearly identify the object they’re informing or labeling.
Anatomy
- Indicator: Uses color to indicate semantic meaning.
- Label: Describes the status.
Demo
Open the component in Figma.
When to use
Use status for these scenarios:
- To display the status of an object.
In a table
Table supports status as a content type. Status requires a distinct column and should not be mixed with other content types.
Paired with a heading or label
Status can be paired with headings or labels to create the proper association of an object and its status. It’s not necessary for it to always be next to the heading, as long as the layout properly associates the two elements.
When not to use
Use another type of indicator for scenarios when you need to display a count or multiple categories or keywords to support an object.
Use badge instead:
- To report item counts.
- To indicate that there are items that are new to the user or need their attention.
Use a tag instead:
- When one object can be mapped to multiple categories or keywords.
- To display the parameters of filtered data.
Similar components
Properties
Severity
Status relies on the combination of an indicator and label to create the best experience possible for everyone.
Accessibility
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.
Content guidelines
Label
Don’t use alternatives to existing status labels.
Only create a new status label if there aren’t any existing options to communicate the status you need. When creating a new label, follow these guidelines:
- A label is required.
- Clearly communicate the status.
- Use one or two words.
- Consider all of the statuses used in your experience. Make their relationship or progression clear. For example, To do, Open, In progress, Blocked, Closed, Done and Active or Inactive.
- Try to use a consistent structure, and even tense if possible. For example if a status is Paused, try to make your other statuses past tense.
- Don’t change the text color to match the indicator.
- Use sentence case.
Label examples
Content accessibility
Statuses must always include a label. Color alone is not enough to communicate the status.