Badge

A tiny count and labelling component built with Luxa CSS. Perfect for notifications, status indicators, and labels. Copy, modify, and use in your projects.

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

Success!

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

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

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

.badge:hover {
  border-color: var(--neutral-05);
}

Best Practices

Clearly differentiate the badge from other content;

Keep badges brief and informative;

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

Browse more component recipes or explore the utilities documentation for additional styling options.