Default Primary Active Pending Failed Beta New Sass

@use 'sprucecss/scss/spruce' as *;

.badge-demo {
  @include layout-cluster('xs');
}

.badge {
  --badge-color: #{color('text')};
  align-items: center;
  background-color: color-mix(in srgb, var(--badge-color) 12%, transparent);
  border: config('border-width-base', $display) solid transparent;
  border-radius: radius('pill');
  color: var(--badge-color);
  display: inline-flex;
  font-size: 0.8em;
  font-weight: 600;
  gap: 0.35em;
  line-height: 1.4;
  padding: 0.1em 0.65em;
  text-decoration: none;
  white-space: nowrap;

  &--primary {
    --badge-color: #{color('primary')};
  }

  @each $type in ('success', 'warning', 'danger', 'info') {
    &--#{$type} {
      --badge-color: #{color($type, 'alert')};
    }
  }

  &--warning {
    color: color-mix(in srgb, var(--badge-color) 50%, #{color('heading')});
  }

  &--solid {
    background-color: var(--badge-color);
    color: hsl(0deg 0% 100%);
  }

  &--outline {
    background-color: transparent;
    border-color: currentcolor;
  }

  &--count {
    justify-content: center;
    min-inline-size: 1.5em;
    padding-inline: 0.4em;
  }

  &--interactive {
    @include transition($property: 'background-color');

    &:hover {
      background-color: color-mix(in srgb, var(--badge-color) 22%, transparent);
      color: var(--badge-color);
    }
  }

  &__dot {
    background-color: currentcolor;
    block-size: 0.45em;
    border-radius: 50%;
    inline-size: 0.45em;
  }
}

<div class="badge-demo">
    <span class="badge">Default</span>
    <span class="badge badge--primary">Primary</span>
    <span class="badge badge--success"><span class="badge__dot" aria-hidden="true"></span>Active</span>
    <span class="badge badge--warning">Pending</span>
    <span class="badge badge--danger">Failed</span>
    <span class="badge badge--info badge--outline">Beta</span>
    <span class="badge badge--primary badge--solid">New</span>
    <a class="badge badge--primary badge--interactive" href="#">Sass <span class="sr-only">(tag)</span></a>
    <button class="btn btn--outline-primary" type="button">Inbox <span class="badge badge--danger badge--solid badge--count">12<span class="sr-only"> unread messages</span></span></button>
</div>

Badge

Technical Details

One custom property (--badge-color) drives the whole badge; the tinted background is a color-mix() of it, so a new color is one line: .badge--brand { --badge-color: #{color('brand')}; }.
Modifiers: --primary, --success, --warning, --danger, --info (colors), --solid, --outline, --count, --interactive (for links).
The badge size is relative (em), so it scales with its context, like inside a button.
Counters need context for screen readers: add a hidden text like "12 unread messages". Never rely on the color alone to communicate a status.