Pills

Pills are compact, non-interactive labels used to surface key information at a glance. In this design system, they help summarize content—such as case studies or grouped topics—by providing immediate visual cues without overwhelming the layout. Their lightweight form makes them ideal for tagging and categorization across the interface.

Tag Lorem Ipsum Tag Lorem Ipsum Tag Lorem Ipsum Tag Lorem Ipsum Tag Lorem Ipsum

HTML


<span class="pill pill-info">Tag Lorem Ipsum</span>

<span class="pill pill-danger">Tag Lorem Ipsum</span>

<span class="pill pill-success">Tag Lorem Ipsum</span>

<span class="pill pill-warning">Tag Lorem Ipsum</span>

<span class="pill pill-default">Tag Lorem Ipsum</span>

CSS


.pill {
  display: inline-block;
  height: 24px;
  padding: 2px 12px;
  font-family: var(--font-label);
  font-size: var(--label-small-font-size);
  font-weight: 500;
  border-radius: var(--spacing-full);
  text-align: center;
  line-height: 20px;
  white-space: nowrap;
}

/* Blue */
.pill-info {
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* Red/Pink */
.pill-danger {
  background-color: var(--surface-information);
  color: var(--text-information);
}

/* Green */
.pill-success {
  background-color: var(--surface-success);
  color: var(--text-success);
}

/* Yellow */
.pill-warning {
  background-color: var(--surface-warning);
  color: var(--text-warning);
}

/* Default/Neutral with border */
.pill-default {
  background-color: var(--surface-default);
  color: var(--text-body-default);
  outline: 1px solid var(--border-default);
}

Accessibility

All pill color variants meet WCAG AAA contrast standards, including green and yellow variants, ensuring legibility across light and dark modes for users with varying visual needs.