BadgeGroup
ImplementedCluster of removable label badges with overflow handling. Renders its own label chips — does not compose the Badge atom.
patterns/molecules/badgegroup.htmlCluster of removable label badges with overflow handling. Renders its own label chips — it does not compose the Badge atom.
BadgeGroup
Display molecule (Family 4 — Tier 1)
Renders a group of label badges with a `+N` overflow indicator. Each badge is a `{ id, label, variant?, onRemove?, onClick? }` item; badges with an `onRemove` get an X button. Renders `emptyMessage` when the list is empty.
This component supports light and dark mode.
Usage
BadgeGroup renders its own label chips (its own variant vocabulary: default/primary/success/warning/error/info) — it does NOT compose the Badge atom. For numeric counts use Badge.
import { BadgeGroup } from '@epasslive/design-system'
<BadgeGroup
badges={[
{ id: 'new', label: 'New', variant: 'primary' },
{ id: 'hot', label: 'Hot', variant: 'error' },
{ id: 'sale', label: 'Sale', onRemove: () => removeFilter('sale') },
]}
ariaLabel="Active product filters"
maxVisible={3}
/>Props
badges*Badge[]Badge items: `{ id: string; label: string; variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'; onRemove?: () => void; onClick?: () => void }`.
maxVisiblenumber3Maximum visible badges; the rest collapse into a `+N` indicator.
variant'default' | 'compact'defaultDisplay variant. `compact` hides remove buttons until hover.
ariaLabel*stringAccessible name for the group (`role="group"`).
emptyMessagestringMessage rendered when `badges` is empty.
trailingReact.ReactNodeContent rendered after the badge row — e.g. a View-detail TextLink — inside the group semantics.
classNamestringAdditional CSS classes on the group container.
idstringRoot element id (falls back to a generated `useId`).
Props
BadgeGroup
badgesBadge[]—Badge items to display
maxVisiblenumber3Maximum visible badges
variant'default' | 'compact''default'Display variant. 'compact' hides remove buttons until hover.
ariaLabelstring—Accessible name for the group (role='group').
emptyMessagestring—Message rendered when badges is empty.
trailingReact.ReactNode—Content rendered after the badge row (§126 Wave 3 #7) — e.g. a View-detail TextLink — inside the group semantics.
classNamestring—Additional CSS classes on the group container.
idstring—Root element id (falls back to a generated useId).
<BadgeGroup />Accessibility
ARIA
1 rulevalidation
1 ruleUsage
Import
import { BadgeGroup } from "@epasslive/design-system"Example 1
<BadgeGroup badges={[{ id: 'new', label: 'New', variant: 'primary' }, { id: 'hot', label: 'Hot', variant: 'error' }]} ariaLabel='Active filters' />Example 2
<BadgeGroup badges={[{ id: 'sale', label: 'Sale', onRemove: () => removeFilter('sale') }]} ariaLabel='Selected filters' />Anti-patterns
— Do not hardcode data in molecules
— Avoid complex business logic in molecules