Label chips

Label chips render 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-chip "+N" popover.

#Example

#Usage

#Removable values and overflow

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

A removable chip is interactive, so it takes a hover background and its "+N" opens on click. A read-only chip has no hover state, and its "+N" reveals the hidden values on hover or keyboard focus. Either way the "+N" panel lists its values as bubbles; a read-only one just leaves off the dismiss button.

A group name wider than its chip truncates, so the values keep their room.

#Guidelines

#When to use

• When a resource's labels are organized into named groups and each group should read as one chip.
• 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

#LabelChips

Name	Default	Description
groupedLabels	—	GroupedLabelChipValues[]One chip per entry, rendered in the given order. Entries with no labels are the caller's to drop.
size	"md"	"sm" | "md"Chip size.
onRemoveLabel	—	(label: LabelChipValue, group: LabelChipGroup) => voidMakes values removable: every value carries a dismiss X.