Status

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

null
  1. Indicator: Uses color to indicate semantic meaning.
  2. 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

null

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

null

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 you have more than one status on a page

null

There is a second, lamp variant of our status component available to be used in circumstances where you need to differentiate between more than one status on a given layout.

 

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.

null
null

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

null

 

Content accessibility

Statuses must always include a label. Color alone is not enough to communicate the status.

Figma: Status