Chip

Implemented

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

Categoryatoms

Sourcepatterns/atoms/chip.html

AI HintToggleable filter pill — the selected state uses the canonical theme-stable btn-primary surface (AA on any parent, both themes). Compose into filter bars and DataTable toolbars; for static categorical labels use Tag.

Toggleable filter / facet chip with optional leading icon. FR-CA: Puce de filtre activable.

Chip

Interactive atom (Family 1 — Tier 1)

A controlled toggle. Pass selected and onToggle — never derive state internally.

This component supports light and dark mode.

Interactive demo

Usage

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

<Chip label="Concert" selected={filters['Concert']} onToggle={() => toggle('Concert')} />

Accessibility

The root is a <button> with aria-pressed bound to the selected state. Screen readers announce "Concert, bouton, pressé/non pressé".

Props

Prop

Type

Default

Description

label*

string

—

Visible label.

selected*

boolean

—

Controlled selected state.

onToggle*

() => void

—

Toggle handler.

icon

React.ReactNode

—

Optional leading icon.

size

'sm' | 'md'

md

Padding/height scale.

Props

Preview

Chip

Prop

Type

Required

Default

Description

label

string

Required

—

No description.

selected

boolean

Required

—

No description.

onToggle

() => void

Required

—

No description.

Quick use:<Chip />

Accessibility

ARIA rolebutton

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Chip />

Example 2

tsxSnippet

<Chip variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms