COMPONENT: Chip / FilterPill Component

[nayan458]

Task: Chip / FilterPill Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: S

Component Type

• Design system (no API calls, pure props)

Props Interface

interface ChipProps {
  label:       string;
  isSelected?: boolean;
  isDisabled?: boolean;
  onSelect?:   () => void;
  onDismiss?:  () => void;    // renders × button when provided
  count?:      number;        // badge count shown inline e.g. "Escalated (1)"
  className?:  string;
}

// Group wrapper for mutually exclusive filter sets
interface ChipGroupProps {
  options:    { label: string; value: string; count?: number }[];
  selected:   string;
  onChange:   (value: string) => void;
}

Variants / States

State	Description
Default	Unselected — tertiary border, secondary text
Selected	Secondary bg, primary text, secondary border, medium weight
Disabled	Opacity 50%, no pointer events
With count	Count badge renders inside the pill after the label
Dismissible	× button inside pill — used for active filter tags

Acceptance Criteria

• ChipGroup enforces single-select — calls onChange with new value
• count badge renders inline without breaking pill shape
• onDismiss renders ×, clicking it does not also call onSelect
• Keyboard accessible — Space / Enter toggles selection
• Scroll-overflow works — ChipGroup inside overflow-x: auto container doesn't wrap
• Zero hardcoded hex values
• Storybook stories: default, selected, with count, dismissible, ChipGroup

Notes

• Used in ModerationQueue filter row (All / Escalated / Spam / Hate speech) and UserManagement role filters
• ChipGroup is the right component for the queue filter row — not individual Chip instances managed manually