Odyssey, the Okta Design System

# Status

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.

# Usage

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.

Server status
System operational
<dl class="ods-status is-ods-status-success">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    System operational
  </dd>
</dl>

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.

Server status
System operational
<dl class="ods-status is-ods-status-success is-ods-status-label-hidden">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    System operational
  </dd>
</dl>

# Variants

There are four variants of Status available: Neutral, Success, Caution, and Danger.

# Neutral

Neutral Statuses are gray and should be used to indicate states like Paused, Not started, or Queued.

This variant is our default.

Server status
System inactive
<dl class="ods-status">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    System inactive
  </dd>
</dl>

# Success

Success Statuses are green and should be used to indicate states like Complete, Active, Available, Service operational.

Server status
System operational
<dl class="ods-status is-ods-status-success">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    System operational
  </dd>
</dl>

# Caution

Caution Statuses are yellow and should be used to indicate states like Attention suggested or Service degradation.

Server status
Service degradation
<dl class="ods-status is-ods-status-caution">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    Service degradation
  </dd>
</dl>

# Danger

Danger Statuses are red and should be used to indicate states like Error, Failure, or Service disruption.

Server status
Service disruption
<dl class="ods-status is-ods-status-danger">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    Service disruption
  </dd>
</dl>

# Content guidelines

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.

# Accessibility

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.

Server status
Service disruption
<dl class="ods-status is-ods-status-danger" role="status">
  <dt class="ods-status--label">
    Server status
  </dt>
  <dd class="ods-status--value">
    Service disruption
  </dd>
</dl>