Status badge

Status badge: badge used to draw attention when scanning content. Frequently the text is displayed in uppercase. Like the counter badge, displaying the badge is optional. The status badge is seldom a link to content with the same status.

Visual Design

Essential to configure:

Text color
Fill color

Important to configure:

Roundness
Border

Example

Status color

CSS code for assigning status colors to badges

nih-status-badge.off-line {
  background-color: var(--nih-color-status-error);
}
nih-status-badge.on-line {
  background-color: var(--nih-color-status-success);
}

Server status:

on-line
off-line

Dataviz color

CSS code for assigning dataviz colors to badges

nih-status-badge.invoice-draft {
  background-color: var(--nih-color-dataviz-gray);
}
nih-status-badge.invoice-draft {
  background-color: var(--nih-color-dataviz-blue);
}
nih-status-badge.invoice-paid {
  background-color: var(--nih-color-dataviz-green);
}

Invoice status:

draft
sent
paid

Feedback color

CSS code for assigning feedback colors to badges

nih-status-badge.component-removed {
  background-color: var(--nih-color-feedback-danger);
}
nih-status-badge.component-unstable {
  background-color: var(--nih-color-feedback-warning);
}
nih-status-badge.component-stable {
  background-color: var(--nih-color-feedback-safe);
}

Component maturity status:

removed
unstable
stable