Badge

atoms

Numeric count badge — used for notification counts and nav item counts. Red pill, 20px min, 10px font, 700 weight.

ARIA Role: status

Demo

ActiveSuccessWarningErrorDefaultSmall

Props

PropTypeRequiredDefaultDescription
countnumberYes—
maxnumberNo99
variant'error' | 'success' | 'warning' | 'neutral'No'error'

TypeScript Interface

interface BadgeProps {
  count: number;
  max?: number;
  variant?: 'error' | 'success' | 'warning' | 'neutral';
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]count must be a non-negative integer(NASA Rule 5)
  • [aria]Visible count must be paired with descriptive aria-label (e.g. count=3, label='3 new events')(WCAG 1.3.1)

Usage

Import

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

Basic

<Badge />

With Variants

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