Status Pill

The status pill component is a way to communicate status of various application functions.

Use

To use the status pill component, use the @extend .status-pill within the SCSS.

.stat-error,
.stat-warning {
  &::before {
    @extend .status-pill;
  }
}

.stat-error {
  &::before {
    border-color: $color-error;
  }
}

.stat-warning {
  &::before {
    border-color: $color-warning;
  }
}
<div class="stat stat-success">
    <h2 class="stat-header">Instance memory used</h2>
    <span class="stat-primary">10 MB</span>
    <span class="stat-info"><span>460 KB available</span></span>
</div>
<div class="stat stat-{{ modifier }}">
  <h2 class="stat-header">Instance memory used</h2>
  <span class="stat-primary">10 MB</span>
  <span class="stat-info"><span>460 KB available</span></span>
</div>
{
  "text": "success",
  "modifier": "success"
}