# Tag

> A compact keyword label for categories and filters, with an optional accessible remove button.

Category: Data display · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/tag

Use Tag to show assigned groups, departments or labels, and let people remove them. Every remove button has its own label, such as "Remove Marketing", so screen-reader users know which tag it affects.

## Import

```tsx
import { Tag } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Tag } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      <Tag>Sales</Tag>
      <Tag>London office</Tag>
      <Tag>Q4 campaign</Tag>
    </div>
  );
}
```

### Removable

```tsx
import * as React from 'react';
import { Tag } from '@bindshq/stance-react';

export function Removable() {
  const [tags, setTags] = React.useState(['Marketing', 'Legal', 'EMEA', 'Contractors']);
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {tags.map((t) => (
        <Tag key={t} onRemove={() => setTags((all) => all.filter((x) => x !== t))}>
          {t}
        </Tag>
      ))}
      {tags.length === 0 && <span>All departments removed.</span>}
    </div>
  );
}
```

### With icons and sizes

```tsx
import { Icon, Tag } from '@bindshq/stance-react';

export function WithIcons() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
      <Tag size="sm" icon={<Icon name="users" size={12} />}>
        Group
      </Tag>
      <Tag icon={<Icon name="building" />}>Northwind Ltd</Tag>
      <Tag icon={<Icon name="globe" />} onRemove={() => {}} disabled>
        Global
      </Tag>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Tag | `size` | `'sm' \| 'md'` | `'md'` | Height 22 or 28px. |
| Tag | `icon` | `ReactNode` | None | Leading icon. |
| Tag | `onRemove` | `() => void` | None | Shows a remove button when provided. |
| Tag | `removeLabel` | `string` | None | Remove button label; defaults to "Remove <text>". |
| Tag | `disabled` | `boolean` | `false` | Disables removal. |

## Accessibility

- The remove control is a real button named after the tag, e.g. "Remove Marketing".
- When children are not plain text, pass removeLabel.
- After removing a tag, move focus to a sensible place, such as the next tag or the input that adds tags.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` `Space` | Removes the tag when its remove button is focused. |

## Guidelines

**Do**

- Keep tag text short.

**Don’t**

- Use Tag for status; use Badge.

## Related

- https://stanceui.com/components/badge
- https://stanceui.com/components/chip
- https://stanceui.com/components/multi-select