Badge

The tiny count and labelling component.

Badges can indicate notifications, item counts, or other information related to navigation; these small UI elements convey important information at a glance.

<div className="badge success">
  <span className="status">
  <span>Success!</span>
</div>

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 0.75em;
  gap: 0.5em;
  border: 0.0625rem solid var(--neutral-03);
  border-radius: var(--rounded-sm);
  background-color: var(--neutral-01);
  color: var(--neutral-09);
  font-weight: 500;
  font-size: 1em;
  line-height: 1;
  transition: border-color 240ms var(--fluid);

  .status {
    width: 0.75em;
    height: 0.75em;
    border-radius: 100%;
    background-color: var(--neutral-05);
  }

  &.success {
    .status {
      background-color: var(--green);
    }
  }

  &:hover {
    border-color: var(--neutral-04);
  }
}

Success!

Best Practices

Clearly differentiate the badge from other content;

Keep badges brief and informative;

Ensure accessibility with aria-label for non-text badges.