Chip

Playground

Installation

pnpm add @tessinaui/ui

Usage

import { Chip, ChipGroup } from "@tessinaui/ui";

<ChipGroup>
  <Chip>Label</Chip>
  <Chip selected>Selected</Chip>
  <Chip onRemove={() => {}}>Removable</Chip>
  <Chip leadingIcon={<Tag />}>With icon</Chip>
</ChipGroup>

Showcase

Variants

API Reference

Chip

ChipAvatarDef

ChipGroup

Container that wraps multiple chips with consistent spacing.

Leading Slot Priority

When multiple leading props are provided, the first match wins:

1. leadingAvatar (avatar always renders if defined)
2. leadingStatus (status dot — requires showLeadingIcon !== false)
3. leadingIcon (icon — requires showLeadingIcon !== false)

Remove Button

When onRemove is provided, the chip renders as two sibling <button> elements inside a pill container:

<Chip onRemove={(e) => removeTag(tag)}>
  TypeScript
</Chip>

The remove button fires onRemove and stops click propagation so it does not trigger onClick (the toggle handler).

Toggle Pattern

const [selected, setSelected] = useState(false);

<Chip
  selected={selected}
  onClick={() => setSelected((s) => !s)}
>
  Filter
</Chip>

Filter Group

const [active, setActive] = useState<string[]>([]);

function toggle(tag: string) {
  setActive((prev) =>
    prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]
  );
}

<ChipGroup>
  {tags.map((tag) => (
    <Chip
      key={tag}
      selected={active.includes(tag)}
      onClick={() => toggle(tag)}
    >
      {tag}
    </Chip>
  ))}
</ChipGroup>

Accessibility

• Renders as <button type="button"> with aria-pressed reflecting the selected state.
• When onRemove is provided, the main area and remove button are separate focusable <button> elements — fully keyboard navigable.
• The remove button has aria-label="Remove".
• disabled applies pointer-events-none and opacity-50 to all interactive areas.
• Touch targets meet WCAG 2.1 AA (≥ 44×44 px) at md, lg, xl sizes via min-h-[44px].
• Leading icon and trailing icon containers have aria-hidden="true" — labels provide the accessible text.