Tag
A selected-value chip with optional removal.
Installation
Import the component in your screen:
import { Tag } from '@commenda/pathfinder/tag';Load the stylesheet once in your app root, after host styles:
import '@commenda/pathfinder/styles.css';Pathfinder ships precompiled CSS; no Tailwind setup is required. In Next.js App Router, put interactive state and callbacks in a client component. See installation for the workspace setup.
API reference
| Prop | Type | Behavior |
|---|---|---|
labelRequired | string | Required value name |
tone | "neutral"|"blue" | neutral; blue marks added context |
leadingIcon | ReactElement<any, string | React.JSXElementConstructor<any>> | Decorative 12px slot |
removeConfig | ObjectView fields | Named separate button; app owns removal and undo |
className | string | Additional classes for the component root. |
id | string | Stable HTML identifier for the component. |
removeConfigObject fields
| Field | Type | Requirement |
|---|---|---|
onRemove | () => void | Required |
label | string | Optional |
isDisabled | boolean | Optional |
Usage rules
20px minimum height, radius 4, Label 12. Long labels truncate and expose full text on hover and keyboard focus. Removal stops bubbling to a parent selection control. Do not nest Tag inside a button. Use Badge for system status. Overflow counts have no remove action.
Tones
Removal
Design rules
Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.
Source rules
| Rule | Source | Contract |
|---|---|---|
| TAG-001 | 179:22 | 20px value chip, radius 4, 12px artwork, optional removal. |
| TAG-002 | 184 documentation | Keep label single-line; full text available on hover/focus. |
All source IDs refer to The System.
Explicit implementation decisions
Tag's full-label span is keyboard-focusable for its tooltip and remains text; it is not a fake action button. Only its optional remove button changes data. App code owns undo and selection state.