Chip

atoms

Selectable filter chip — multi-select group. Like a small Pill but with optional leading icon and selected/unselected visual states.

ARIA Role: button

Demo

MusicConferenceOutdoor

AvailableAlmost fullSold out

Props

Prop	Type	Required	Default
`label`	`string`	Yes	`—`
`selected`	`boolean`	Yes	`—`
`onToggle`	`() => void`	Yes	`—`

TypeScript Interface

interface ChipProps {
  label: string;
  selected: boolean;
  onToggle: () => void;
  icon?: React.ReactNode;
  disabled?: boolean;
  size?: 'sm' | 'md';
}

Assertions (NASA Rule 5)

[type]selected and onToggle required (controlled)(NASA Rule 5)
[aria]role='button' aria-pressed reflects selected state(WCAG 4.1.2)

Usage

Import

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

Basic

<Chip />

With Variants

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