BadgeGroup

molecules

Displays multiple badges as a cluster. Handles overflow with '+N' indicator.

ARIA Role: group

Demo

ActiveSuccessWarningErrorDefault

Props

PropTypeRequiredDefaultDescription
badgesBadge[]Yes—Badge items to display
maxVisiblenumberNo3Maximum visible badges
variant'default' | 'compact'No'default'Display variant

TypeScript Interface

interface BadgeGroupProps {
  badges: Badge[];
  maxVisible?: number;
  variant?: 'default' | 'compact';
}

Assertions (NASA Rule 5)

  • [aria]Container must announce badge count to screen readers(WCAG 1.3.1)
  • [validation]Max 99 displayed; show '99+' otherwise(NASA Rule 5)

Usage

Import

import { Badgegroup } from '@epasslive/design-system'

Basic

<Badgegroup />

With Variants

<Badgegroup variant="primary" size="md" />