Components
Chip
Interactive token-driven pill — an action button, or a toggle with aria-pressed.
Action vs. toggle
Chip is a real <button> (unlike the non-interactive Badge).
Leave selected undefined for a plain action chip — a suggestion or quick
action that fires onClick. Pass selected to turn it into a toggle: the
chip then exposes aria-pressed and the selected accent treatment.
Selection is caller-managed — the consumer tracks which chips are on, so the same component drives single-select, multi-select, and filter-bar patterns.
Usage
import { Chip } from '@cajon-ui/react';
// Action chip — no aria-pressed
<Chip leadingIcon={<SparkIcon />} onClick={ask}>Show my cash flow</Chip>
// Toggle chip — caller owns the selected state
<Chip selected={active} onClick={() => setActive(!active)}>Income</Chip>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
selected | boolean | undefined | Omit for an action chip; set it to make a toggle (adds aria-pressed) |
leadingIcon | ReactNode | — | Rendered before the label, marked aria-hidden |
size | sm | md | md | Pill size |
All other native <button> attributes pass through; the component forwards its
ref.