11 Status Indicators

Labels should be used within cards and list rows while Pills should be used within Detail panels to give the status more prominence.

Colors may be used to help highlight various statuses or states. The following colors should be used as a standard, and are reserved for these statues or states.

  • Grey - inactive
  • Green - confirmation, approval, generally positive
  • Orange - warning, action can be taken
  • Red - error, non-approval, generally negative, action can't be taken

Note that information, statuses or states should not be communicated by color alone. It is recommended a label always accompany a color.

11.1 Example Status

A type of label used to show the status of a line level element. No action or activity" above the grey 'status' line and add the code snippet.

Default Success Warning Danger
 <span class="label label-default">Default</span>
 <span class="label label-success">Success</span>
 <span class="label label-warning" >Warning</span>
 <span class="label label-danger" >Danger</span>

11.4 Activity Status

Default Success Warning Danger
<div class="active demo-container">
 <span class="label label-default">Default</span>
 <span class="label label-success">Success</span>
 <span class="label label-warning" >Warning</span>
 <span class="label label-danger" >Danger</span>
</div>

11.7 Status Badges

Default Success Warning Danger
<span class="badge">Default</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>