CBP UI Library

Badge 

<span class="badge badge--error">Overdue</span>

<link media="all" rel="stylesheet" href="/badge/badge.css" />
<script src="/badge/badge.js"></script>
 
<span class="badge badge--{{ modifier }}">{{ text }}</span>

{% import "_macros.twig" as h %}
{{ h.componentAssets('badge') }}
 
{
  "modifier": "error",
  "text": "Overdue"
}
  • Content: 
    .badge {
  font-size: var(--badgeFontSize, var(--step--2));
  background-color: var(--badgeColor);
  padding: 0.2em 0.5em;
  display: inline-block;
}

.badge--inProgress {
  --badgeColor: var(--accent);
}
.badge--resolved, .badge--complete {
   --badgeColor: var(--success);
 }
.badge--error {
  --badgeColor: var(--alertBg);
}
  • URL: /components/raw/badge/badge.scss
  • Filesystem Path: src/components/badge/badge.scss
  • Size: 327 Bytes

Badge

Used for adding a label to an item, usually displayed next to an item’s title. Could denote the status of an item, like “NEW”, “Completed” or “Overdue”.

Modifiers

Color

  • .badge--inProgress uses the yellow --accent background color
  • .badge--resolved and .badge--complete use the green --success background color
  • .badge--error uses the red --alertBg background color

Sizing

Override the size by setting --badgeFontSize. The default is var(--step--2). The padding units are in em so they will scale proportionally.

Layout

Combine with the inlineList component to vertically center the badge with some text:

<header class="inlineList inlineList--wrap u-step-4">
  <h2>New Project</h2>
  <span class="badge badge--inProgress">In Progress</span>
</header>