@edux-design/tags

Compact status chips + color dots wired to the shared design tokens. The package ships two primitives:

• Tag – rounded label sized for table metadata and filters with variant + tone helpers.
• TagDot – standalone circular indicator for key/value lists or inline legends.

Both components lean on the shared cx helper so they pick up the exact token mix shown in the Tags reference mock.

Installation

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

Peer deps: react@^19.1.0, react-dom@^19.1.0 (already bundled as direct deps in this workspace).

Usage

import { Tag, TagDot } from "@edux-design/tags";

export function Legend() {
  return (
    <div className="flex gap-4 items-center">
      <Tag variant="success" tone="solid">Live</Tag>
      <Tag variant="information" tone="subtle">Draft</Tag>
      <TagDot color="green" aria-label="Healthy" />
    </div>
  );
}

Key props

| Component | Important props | | --------- | --------------- | | Tag | variant="error"\|"warning"\|"success"\|"information"\|"neutral"\|"brand", tone="subtle"\|"solid", size="small"\|"medium", leadingIcon, trailingIcon | | TagDot | color="red"\|"orange"\|"green"\|"blue"\|"neutral", size="small"\|"medium", aria-label |

Development

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

Storybook-style demos live under src/demos/Tags.stories.jsx.

Notes

• All color tokens come from @edux-design/design-tokens so switching the theme automatically updates the chips.
• Tag is intentionally un-opinionated about interactivity; wrap it with a button if you need pill toggles.
• Add new variants or tones by extending VARIANT_STYLES inside Tag.jsx and mirroring the change in the stories.