Status

A status is used to decorate text with a status color

Class .wb-status

Pills are displayed inline and are visually separated.

Status A
Status B
Status C
<div class='wb-status'>Status A</div>
<div class='wb-status'>Status B</div>
<div class='wb-status'>Status C</div>

Modifier .wb-status--success, .wb-status--warning, .wb-status--danger

By default, the status hows a neutral gray color, but you can override the status color by using the above modifiers.

Active
Testing
Paused
Archived
<div class='wb-status wb-status--success'>Active</div>
<div class='wb-status wb-status--warning'>Testing</div>
<div class='wb-status wb-status--danger'>Paused</div>
<div class='wb-status'>Archived</div>