Skip to main content

Status

Displays a small visual indication of state; helpful when used within table cells or piano list keys to avoid the need for a user to check many items individually to determine their state.

Status indicators should ideally have some text which indicates their context. For example, they could be sat next to a text label called ‘Active’, or within a table column entitled ‘Online’. Try not to rely on this indicator alone.

online Online

online Online with icon

offline Offline

offline Offline with icon

inactive I am inactive

Basic usage​

tip

The examples here are laid out using paragraphs, usually you will be using the status component inline with existing elements so you don’t need to copy the paragraphs.

<p>{{ html.status('online') }} Online</p>
<p>{{ html.status('online', { icon: true }) }} Online with icon</p>
<p>{{ html.status('offline') }} Offline</p>
<p>{{ html.status('offline', { icon: true }) }} Offline with icon</p>
<p>{{ html.status('inactive') }} I am inactive</p>

States​

  • online (default)
  • offline
  • active
  • inactive

Some states are simply synonyms of each other, the choice of verb will be defined by the context in which it is to be used.

The ‘state’ will be used for both the title attribute, and for the stateful class name.

<span class="status is-online" title="online"></span>

Accessibility​

You may notice ‘offline’ uses a square instead of a circle, this is to visually distinguish it from the green ‘online’ status for red/green colourblind users as colour alone isn’t a reliable indicator of status. The title attribute is also added which is displayed on hover and for screen readers.

…ensure that all users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it. If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information. WCAG 2.0 Guideline 1.4.1