LabelBadge

Performance-optimized metric label pill.

Description

Performance-optimized metric label pill. Uses plain <span> elements instead of Mantine Badge for high-throughput rendering. Mantine's Badge has significant rendering overhead when displaying hundreds of metric labels. Also exports LabelBadgeSet for rendering full label sets.

✓ Do

All metric label display (key=value pairs)
High-performance scenarios with many labels
Discovered (pre-relabeling) labels with distinct styling

✗ Don’t

Status/health display (use StatusBadge)
Interactive filtering controls (use StateMultiSelect)
Mantine Badge for labels (overhead at scale)

Design

Default Variant

job="prometheus" instance="localhost:9090" __name__="up"

Discovered Variant

__address__="localhost:9090" __scheme__="http"

LabelBadgeSet

__name__="up" job="prometheus" instance="localhost:9090"

LabelBadgeSet Props

Prop	Type	Default	Description
`labels`	`Record<string, string>`	—	Record of label name → value pairs Required
`variant`	`"default" \| "discovered"`	"default"	Visual variant for all labels in the set
`sorted`	`boolean`	false	Whether to sort labels alphabetically

Where this component exists in the Prometheus UI

View in Prometheus UI → /targets

LabelBadge on the Targets page — metric label key-value pairs

Implementation

From components/LabelBadges.tsx in the Prometheus codebase:

export const LabelBadges: FC<LabelBadgesProps> = ({
  labels,
  wrapper: Wrapper = Group,
  style,
}) => (
  <Wrapper gap="xs">
    {Object.entries(labels).map(([k, v]) => (
      <span key={k} className={badgeClasses.labelBadge} style={style}>
        {maybeQuoteLabelName(k)}="{escapeString(v)}"
      </span>
    ))}
  </Wrapper>
);

Layout Specs

Property	Value
Height	22px
Padding (horizontal)	8px (0.5rem)
Gap (between badges)	4px (0.25rem)
Font Size	11px
Font Family	DejaVu Sans Mono
Border Radius	999px (pill)
Border Width	none

Accessibility

Has title attribute showing the full label=value for tooltip
LabelBadgeSet has aria-label="Label set" on the container
Uses semantic HTML (spans) which screen readers handle naturally