# Tag

Package: @commenda/pathfinder@0.1.0
Page: /docs/components/tag
Figma: https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=179-3

```tsx
import { Tag } from '@commenda/pathfinder/tag';

export const TagDefault = () => <Tag label="Meridian UK Ltd" />;
```


## Installation [#installation]

Import the component in your screen:

```tsx
import { Tag } from '@commenda/pathfinder/tag';
```

Load the stylesheet once in your app root, after host styles:

```tsx
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](/docs/getting-started/installation) for the workspace setup.

## API reference [#api-reference]

| Prop | Type | Requirement | Behavior |
| --- | --- | --- | --- |
| `label` | `string` | required | Required value name |
| `tone` | `"neutral" \| "blue"` | optional | neutral; blue marks added context |
| `leadingIcon` | `ReactElement<any, string \| React.JSXElementConstructor<any>>` | optional | Decorative 12px slot |
| `removeConfig` | `{ onRemove: () => void; label?: string; isDisabled?: boolean; }` | optional | Named separate button; app owns removal and undo |
| `className` | `string` | optional | Additional classes for the component root. |
| `id` | `string` | optional | Stable HTML identifier for the component. |

### removeConfig fields

| Field | Type | Required | Description |
| --- | --- | --- | --- |
| `onRemove` | `() => void` | Yes |  |
| `label` | `string` | No |  |
| `isDisabled` | `boolean` | No |  |

## Usage rules [#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 [#tones]


```tsx
import { Tag } from '@commenda/pathfinder/tag';

export const TagTones = () => (
  <div style={{ display: 'flex', gap: 12 }}>
    <Tag label="United Kingdom" />
    <Tag label="Added context" tone="blue" />
  </div>
);
```


### Removal [#removal]


```tsx
import { useState } from 'react';

import { Tag } from '@commenda/pathfinder/tag';

export const TagRemoval = () => {
  const [removed, setRemoved] = useState(false);

  return removed ? (
    <span role="status">Entity removed</span>
  ) : (
    <Tag
      label="Meridian UK Ltd"
      removeConfig={{
        onRemove: () => {
          setRemoved(true);
        },
      }}
    />
  );
};
```


## Design rules [#design-rules]

Figma guidance and reviewed implementation decisions for this component. Rule IDs remain stable for source comments and AI references.

### Source rules [#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](https://www.figma.com/design/dn7BkGYEfIyP0o2zfesfVh/The-System?node-id=68-2).

### Explicit implementation decisions [#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.