Label badge group

A label badge group renders grouped labels: read-only values are comma-separated and removable values have their own dismiss button. Values that do not fit collapse behind an in-badge "+N" popover.

#Example

#Usage

#Removable values and overflow

Pass onRemoveLabel to make values removable. Give the badge a bounded width from its parent to collapse overflowing values.

Only the controls react to the pointer: a badge and its value bubbles keep their background, while the dismiss X and the "+N" take a hover background of their own. A removable badge's "+N" opens on click and stays open until you click outside, moving focus to the next remaining value as you remove; a read-only badge's "+N" reveals the hidden values on hover or keyboard focus. Dropping onRemoveLabel mid-interaction, as a saving draft does, takes every dismiss X with it: focus moves to the "+N" whose panel was open, or to the badge itself, rather than to the document. Either way the "+N" panel lists its values as bubbles; a read-only one just leaves off the dismiss button.

Removing the last label leaves nothing to render, so pass fallbackFocusRef pointing at whatever adds labels back — otherwise the keyboard lands on the document when the final badge unmounts.

A group name wider than its badge truncates, so the values keep their room; hover the name to read it in full.

#Guidelines

#When to use

• When a resource's labels are organized into named groups and each group should read as one badge.
• When values need inline removal.

#When not to use

• For a flat run of badges with no group structure, use a badge group.
• For selecting labels, use a checkbox popover or multi-select.

#Content

• Use sentence case.

#Props

#LabelBadgeGroup

Name	Default	Description
groupedLabels	—	GroupedLabelBadgeValues[]One badge per entry, rendered in the given order. Entries with no labels are the caller's to drop.
size	"md"	"sm" | "md"Badge size.
onRemoveLabel	—	(label: LabelBadgeValue, group: LabelBadgeValueGroup) => voidMakes values removable: every value carries a dismiss X.
fallbackFocusRef	—	RefObject<HTMLElement | null>Focused when a removal empties the collection, so the keyboard does not land on the document once the last badge unmounts. Point it at whatever adds labels back.