Badge Group

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Add this component (its dependencies come along)
npx koalaui-cli@latest add badge-group

Usage#

Wrap your Badge children in BadgeGroup and set max. The group owns only the layout and the overflow affordance: the badges stay plain Badges, styled however you like. The reveal rides the shared Tooltip.

import { BadgeGroup } from "@/components/ui/badge-group"
import { Badge } from "@/components/ui/badge"

export function Skills({ skills }: { skills: string[] }) {
  return (
    <BadgeGroup max={3}>
      {skills.map((skill) => (
        <Badge key={skill} variant="secondary" size="sm">
          {skill}
        </Badge>
      ))}
    </BadgeGroup>
  )
}

Overflow#

max caps the badges shown inline; everything past it collapses into a single +N chip. Hover or focus the chip to reveal the whole list in a tooltip. Omit max to show every badge.

Wrap#

Without a cap, set wrap to let a long set flow onto multiple lines instead of staying on one. Constrain the width and the badges wrap to fit.

Overflow chip#

The +N chip defaults to a small outline badge. Match it to the badges it stands in for with overflowVariant and overflowSize.

Interactive overflow#

When the badges carry links or a dismiss button, pass interactive so the tooltip stays open while the pointer moves into it, so you can click the contents. Here each tag is dismissible; remove a few and the +N recounts.

Custom overflow#

Take over the tooltip body with renderOverflow, which receives the full list and the hidden slice. Return any node: a titled section, a grid, a different layout for just the hidden badges.

FAQ#