Status is used to keep users informed, by providing appropriate feedback on particular concepts or entities. For Okta, status can be used to display overall operational status all the way down to very granular concepts, like user status.
Status should be used to communicate the state of a discrete item, such as a server or individual process. Both labeled and unlabeled variants are acceptable, but should follow the associated guidelines below.
Labels may be hidden by applying the
.is-ods-status-label-hidden class. If a label is not visually present, ensure that appropriate context is communicated by the Status itself and close proximity to the content that it’s supporting.
Even if the label is hidden, it must be populated to ensure appropriate context for users of assistive technology.
There are four variants of Status available: Neutral, Success, Caution, and Danger.
Neutral Statuses are gray and should be used to indicate states like Paused, Not started, or Queued.
This variant is our default.
Success Statuses are green and should be used to indicate states like Complete, Active, Available, Service operational.
Caution Statuses are yellow and should be used to indicate states like Attention suggested or Service degradation.
Danger Statuses are red and should be used to indicate states like Error, Failure, or Service disruption.
Status is intended to be both succinct and easily understood; limit label and description to one to two words. As with other components, use sentence casing for both.
In addition to including copy for assistive technologies, consider whether your Status may change while the user is on the page.
If the current state of Status may change asynchronously while a user is visiting the page, utilize the
role="status" attribute to ensure that assistive technologies correctly indicate this change.
Note: This attribute must be present before the change occurs.