Badge

Notify the user there are changes or new content to see, optionally by displaying an counter.

There are various types of badges:

Counter badge: contains a number announcing a number of new items. Frequently positioned in a supertext or corner position.
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.
Category badge: the category is informative. The category badge is frequently a link to explore items in the same category. Frequently one or more badges are displayed in adjacent fashion.
Dot badge: similar to counter badge, it announces there are n new items, without specifying how many. Contains no text or number. Sometimes has multiple shapes (filled circle vs. circle line) or contains a small icon. Should never convey status information via color alone.

Anatomy

Badge container.
The text. The text should be have a separate container element, so it will be possible to include other parts in the future (an icon for example) while maintaining backwards compatibility. Not sure if the name of this element can and should be the same for all types of badges.

States

hover: only when the badge is interactive
focus: only when the badge is interactive
selected: when using category badges as filter
checked / unchecked: when using category badges as filter

API

The API for counter badge is significantly different than the API for other badges. Where possible, the APIs should align, but one API for all badges is not encouraged.

Visual Design

Font styles of surrounding text, such as bold/italic/underline, should not affect the badge styling.
In some situations the badge should have a font-size relative to the surrounding content. For example: a badge in a heading might need to be quite large to match the heading font size.

Example Component

Experiment

CSS code for basic for styling a badge

.example-badge {
  display: inline-block;
  font-family: var(--nih-font-family-sans-serif);
  padding-block-start: 0.5ex;
  padding-block-end: 0.5ex;
  padding-inline-start: 0.5ch;
  padding-inline-end: 0.5ch;
  border-radius: 0.5ex;

  /* Avoid being affected by surrounding text */
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}

Badge inside header

:root {
  --example-color-attention: red;
  --example-color-attention-contrast: white;
}

.example-badge--new {
  background-color: var(--example-color-attention);
  color: var(--example-color-attention-contrast);
}

You'll never believe what happened to Baby Jane!

breaking news

Badge inside table

CSS code for styling a heading badge

:root {
  --example-color-negative: red;
  --example-color-negative-contrast: white;
  --example-color-positive: green;
  --example-color-positive-contrast: white;
}

.example-badge--positive {
  background-color: var(--nih-color-positive);
  color: var(--nih-color-positive-contrast);
}
.example-badge--negative {
  background-color: var(--nih-color-negative);
  color: var(--nih-color-negative-contrast);
}

Server status
Server #1	online
Server #2	off-line

Badge for categories

CSS code for styling category badges

:root {
  --example-color-dataviz-1: var(--nih-color-dataviz-1, aqua);
  --example-color-dataviz-2: var(--nih-color-dataviz-2, blue);
  --example-color-dataviz-3: var(--nih-color-dataviz-3, fuchsia);
  --example-color-dataviz-4: var(--nih-color-dataviz-4, gray);
  --example-color-dataviz-5: var(--nih-color-dataviz-5, maroon);
  --example-color-dataviz-6: var(--nih-color-dataviz-6, lime);
  --example-color-dataviz-7: var(--nih-color-dataviz-7, green);
  --example-color-dataviz-8: var(--nih-color-dataviz-8, navy);
  --example-color-dataviz-9: var(--nih-color-dataviz-9, purple);
  --example-color-dataviz-10: var(--nih-color-dataviz-10, olive);
  --example-color-dataviz-11: var(--nih-color-dataviz-11, red);
  --example-color-dataviz-12: var(--nih-color-dataviz-12, silver);
  --example-color-dataviz-13: var(--nih-color-dataviz-13, teal);
  --example-color-dataviz-14: var(--nih-color-dataviz-14, yellow);

  --example-color-dataviz-1-contrast: black;
  --example-color-dataviz-2-contrast: white;
  --example-color-dataviz-3-contrast: white;
  --example-color-dataviz-4-contrast: white;
  --example-color-dataviz-5-contrast: white;
  --example-color-dataviz-6-contrast: black;
  --example-color-dataviz-7-contrast: white;
  --example-color-dataviz-8-contrast: white;
  --example-color-dataviz-9-contrast: white;
  --example-color-dataviz-10-contrast: white;
  --example-color-dataviz-11-contrast: white;
  --example-color-dataviz-12-contrast: black;
  --example-color-dataviz-13-contrast: white;
  --example-color-dataviz-14-contrast: black;
}

.example-badge--category-1 {
  background-color: var(--example-color-dataviz-1);
  color: var(--example-color-dataviz-1-contrast);
}
.example-badge--category-2 {
  background-color: var(--example-color-dataviz-2);
  color: var(--example-color-dataviz-2-contrast);
}
.example-badge--category-3 {
  background-color: var(--example-color-dataviz-3);
  color: var(--example-color-dataviz-3-contrast);
}

.example-badge--category-4 {
  background-color: var(--example-color-dataviz-4);
  color: var(--example-color-dataviz-4-contrast);
}

.example-badge--category-5 {
  background-color: var(--example-color-dataviz-5);
  color: var(--example-color-dataviz-5-contrast);
}

.example-badge--category-6 {
  background-color: var(--example-color-dataviz-6);
  color: var(--example-color-dataviz-6-contrast);
}

.example-badge--category-7 {
  background-color: var(--example-color-dataviz-7);
  color: var(--example-color-dataviz-7-contrast);
}

.example-badge--category-8 {
  background-color: var(--example-color-dataviz-8);
  color: var(--example-color-dataviz-8-contrast);
}

.example-badge--category-9 {
  background-color: var(--example-color-dataviz-9);
  color: var(--example-color-dataviz-9-contrast);
}

.example-badge--category-10 {
  background-color: var(--example-color-dataviz-10);
  color: var(--example-color-dataviz-10-contrast);
}

.example-badge--category-11 {
  background-color: var(--example-color-dataviz-11);
  color: var(--example-color-dataviz-11-contrast);
}

.example-badge--category-12 {
  background-color: var(--example-color-dataviz-12);
  color: var(--example-color-dataviz-12-contrast);
}

.example-badge--category-13 {
  background-color: var(--example-color-dataviz-13);
  color: var(--example-color-dataviz-13-contrast);
}

.example-badge--category-14 {
  background-color: var(--example-color-dataviz-14);
  color: var(--example-color-dataviz-14-contrast);
}

Wesley Crusher has a weblog.

Space
Weblogs
Sci-Fi
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.