Design Guide – v. 9.1.0

Status

The status component is a good way to convey to the user the state of something.

Overview

Be aware of what color you use when deciding what message you want to convey. A completion status should not use a warning or danger status, that is why .status-success exists. NOTE: Be careful not to rely solely on the color of the status icon to convey your message.

  • Neutral
  • Success
  • Mild Warning
  • Warning
  • Danger
HTML
1
2
3
4
5

<span class="status status-neutral">Neutral</span>
<span class="status status-success">Success</span>
<span class="status status-warning">Mild Warning</span>
<span class="status status-warning-2">Warning</span>
<span class="status status-danger">Danger</span>

Example of use

StatusInvoice numberDue dateAmount
Unpaid1234562020-08-191079,00
Paid1234552020-07-191079,00
Overdue1234542020-06-191079,00
Reminder1234532020-05-191079,00
Sent to collection1234522020-04-191079,00

Extended usage

The status component inherits the size of its direct parent.

Neutral

Success

Mild Warning

Warning

Danger
HTML
1
2
3
4
5

<h1 class="status status-neutral">Neutral</h1>
<h2 class="status status-success">Success</h2>
<h3 class="status status-warning">Mild Warning</h3>
<h4 class="status status-warning-2">Warning</h4>
<h5 class="status status-danger">Danger</h5>