BadgeGroup

A composable component for displaying a group of badges with overflow handling and "+N more" pattern.

Loading component...

Installation

Usage

The BadgeGroup component displays a collection of children with automatic overflow handling. When there are more children than the maxVisible limit, excess items are collapsed into a "+N" badge. Pass a renderOverflowContent function to enable a tooltip on the overflow badge.

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

Basic Usage

// Shows: [React] [TypeScript] [Tailwind CSS] [+2]
<BadgeGroup maxVisible={3}>
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>Tailwind CSS</Badge>
  <Badge>Next.js</Badge>
  <Badge>Node.js</Badge>
</BadgeGroup>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	Badge elements to display
`maxVisible`	`number`	-	Maximum children shown before overflow
`size`	`'sm' \| 'md' \| 'lg'`	`'sm'`	Size of the overflow badge
`variant`	`BadgeVariant`	`'neutral-inverted'`	Variant for the "+N" overflow badge
`gap`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`	Gap between badges
`wrap`	`boolean`	`false`	Allow badges to wrap to multiple lines
`renderOverflowContent`	`(overflow: ReactNode[]) => ReactNode`	-	Custom render for overflow tooltip. If omitted, no tooltip is shown.

Examples

With Different Variants

<BadgeGroup maxVisible={4}>
  <Badge variant="success-inverted">Active</Badge>
  <Badge variant="warning-inverted">Pending</Badge>
  <Badge variant="info-inverted">In Review</Badge>
  <Badge variant="neutral-inverted">Archived</Badge>
</BadgeGroup>

<BadgeGroup
  maxVisible={2}
  renderOverflowContent={(overflow) => (
    <div className="flex flex-col gap-1">{overflow}</div>
  )}
>
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>Tailwind CSS</Badge>
  <Badge>Next.js</Badge>
</BadgeGroup>

Wrapping Enabled

For cases where you want all badges visible:

<BadgeGroup wrap>
  <Badge>React</Badge>
  <Badge>TypeScript</Badge>
  <Badge>Tailwind CSS</Badge>
</BadgeGroup>

In ListView

BadgeGroup works well in the ListViewIntermediary slot:

<ListView>
  <ListViewStart title="Model Name" />
  <ListViewIntermediary>
    <BadgeGroup maxVisible={2}>
      <Badge size="sm">React</Badge>
      <Badge size="sm">TypeScript</Badge>
      <Badge size="sm">Tailwind</Badge>
    </BadgeGroup>
  </ListViewIntermediary>
  <ListViewEnd>
    <Button>Configure</Button>
  </ListViewEnd>
</ListView>

In ListCard

BadgeGroup also fits naturally in ListCardBody:

<ListCard>
  <ListCardHeader>Model Name</ListCardHeader>
  <ListCardBody>
    <ListCardDescription>Description text...</ListCardDescription>
    <BadgeGroup maxVisible={3}>
      <Badge size="sm">React</Badge>
      <Badge size="sm">TypeScript</Badge>
      <Badge size="sm">Tailwind</Badge>
    </BadgeGroup>
  </ListCardBody>
</ListCard>

Demo

Open in