Status-indicator

Status indicators are dynamic pieces of information that should be used to convey the status of a person, an object or a process. They do not require any user actions to be updated, and are usually part of a larger component.

Angular

React

Vanilla

Figma

Last updated v5.0.0

Example

Offline

Online

Away

Do not disturb

Busy

Unknown

Error

Success

Warning

In progress

Info

<div style="display: flex; flex-direction: column; gap: 24px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 56px;">
  <div class="nj-status-indicator nj-status-indicator--offline">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Offline</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--online">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Online</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--away">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Away</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--do-not-disturb">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Do not disturb</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--busy">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Busy</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--unknown">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Unknown</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--error">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Error</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--success">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Success</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--warning">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Warning</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--in-progress">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">In progress</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--information">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Info</p>
  </div>
</div>

Size variations

Status-indicators come in 3 different sizes

small : nj-status-indicator--sm
medium : default, no modifier needed
large : nj-status-indicator--lg

Online

<div style="display: flex; flex-direction: column; gap: 24px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 56px;">
  <div class="nj-status-indicator nj-status-indicator--sm">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Online</p>
  </div>
  <div class="nj-status-indicator">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Online</p>
  </div>
  <div class="nj-status-indicator nj-status-indicator--lg">
    <div class="nj-status-indicator__svg"></div>
    <p class="nj-status-indicator__text">Online</p>
  </div>
</div>

Without label

You can also use Status-indicators without a label (for example with the avatar).

Accessibility

Using status-indicators without label to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .nj-sr-only class.

<div style="display: flex; flex-direction: column; gap: 24px; background-color: var(--nj-semantic-color-background-neutral-secondary-default); padding: 56px;">
  <div class="nj-status-indicator nj-status-indicator--offline" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--online" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--away" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--do-not-disturb" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--busy" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--unknown" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--error" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--success" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--warning" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--in-progress" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
  <div class="nj-status-indicator nj-status-indicator--information" aria-hidden="true">
    <div class="nj-status-indicator__svg"></div>
  </div>
</div>

Accessibility

As far as accessibility is concerned, we recommend to be mindful of the following:

Always provide an accessible name. For example, if you use an icon-only status indicator, make sure it is associated to a textual alternative
If relevant, in case of status changes, don’t forget to make them perceivable by everyone. For instance, you could use a live region to let users relying on assistive technologies know that a status has changed
Use status indicators wisely so as not to cause cognitive overload

Stamp

Switch