@edux-design/chips

Token-driven filter chips that compose existing primitives (like TagNumber) without extra props. Each chip renders a pill with a count, label, and optional dismiss control that mirrors the spec in chips.png.

Installation

pnpm add @edux-design/chips @edux-design/utils @edux-design/icons
# or
npm install @edux-design/chips @edux-design/utils @edux-design/icons

The package ships React components and depends on react@^19.1.0 / react-dom@^19.1.0.

Usage

import { Chip } from "@edux-design/chips";
import { TagNumber } from "@edux-design/tags";

export function Filters({ onRemove }) {
  return (
    <Chip label="Label" onRemove={onRemove}>
      <TagNumber variant="brand" tone="solid">999</TagNumber>
    </Chip>
  );
}

Key Props

| Prop | Description | | ---- | ----------- | | label | Primary text rendered inside the chip (truncated when needed). | | size | "default" (40px tall) or "small" (32px tall). | | onRemove | When provided, renders a close icon button that calls the handler. | | removeLabel | Accessible label for the close button. Defaults to "Remove chip". | | disabled | Mutes colors, disables the close button, and removes pointer interactions. |

children are rendered before the label, so you can compose TagNumber (or any other primitive) directly inside the chip without a dedicated prop.

Development

pnpm --filter @edux-design/chips lint
pnpm --filter @edux-design/chips check-types
pnpm --filter @edux-design/chips build

Stories live under src/demos/Chip.stories.jsx with size + state examples pulled from chips.png.

Notes

• Focus, hover, pressed, dragged, and inactive visuals are all handled via Tailwind utility classes wired to the shared design tokens.
• The chip container uses focus-within so the focus ring appears when the remove button is tabbed to.
• Feel free to slot other components ahead of the label; the layout simply spaces whatever you supply, so TagNumber composition stays entirely declarative.