> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Tag

An interactive chip for a keyword or attribute the reader can select or remove — a chip that only states a value is a `Badge`. Give it one job: Carbon warns against tags carrying several functions at once, and a chip that both filters and deletes is one people trigger by accident.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Tag) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/status-indication-tag--overview)

```tsx
import { Tag } from '@wallarm-org/design-system/Tag';

export const Basic = () => <Tag>Tag</Tag>;
```

## Usage

```tsx
import { Tag } from '@wallarm-org/design-system/Tag';
```

## Examples

### Sizes

The same two heights as `Badge`, so a row mixing them stays level.

```tsx
import { HStack } from '@wallarm-org/design-system/Stack';
import { Tag } from '@wallarm-org/design-system/Tag';

export const Sizes = () => (
  <HStack align='center' gap={8}>
    <Tag size='medium'>
      Medium Tag
    </Tag>
    <Tag size='large'>
      Large Tag
    </Tag>
  </HStack>
);
```

### Disabled

Out of the tab order and unclickable, but still readable — a filter that cannot currently
apply is still information.

```tsx
import { HStack } from '@wallarm-org/design-system/Stack';
import { Tag } from '@wallarm-org/design-system/Tag';

export const Disabled = () => (
  <HStack gap={8}>
    <Tag size='medium' disabled>
      Disabled Medium
    </Tag>
    <Tag size='large' disabled>
      Disabled Large
    </Tag>
  </HStack>
);
```

### Closable

A dismiss control for a value the reader added, such as an applied filter. Removal is the
only thing the control should do.

```tsx
import { useState } from 'react';
import { Tag, TagClose } from '@wallarm-org/design-system/Tag';

export const Closable = () => {
  const [isVisible, setIsVisible] = useState<boolean>(true);

  return (
    <>
      {isVisible && (
        <Tag data-testid='tag'>
          Closable tag
          <TagClose onClick={() => setIsVisible(false)} />
        </Tag>
      )}
    </>
  );
};
```

### Selectable

A toggle, for filtering by tapping the values themselves. Selected state has to be visible
without colour alone.

```tsx
import { createListCollection } from '@ark-ui/react/collection';
import { Earth } from '@wallarm-org/design-system/icons';
import { Select, SelectButtonTag, SelectButtonTagValue, SelectContent, type SelectDataItem, SelectOption, SelectOptionIndicator, SelectOptionText, SelectPositioner } from '@wallarm-org/design-system/Select';
import { VStack } from '@wallarm-org/design-system/Stack';

export const Selectable = () => {
  const collection = createListCollection<SelectDataItem>({
    items: [
      {
        value: 'UTC',
        label: 'UTC',
      },
      {
        value: 'UTC+1',
        label: 'UTC+1',
      },
      {
        value: 'UTC+2',
        label: 'UTC+2',
      },
      {
        value: 'UTC+3',
        label: 'UTC+3',
      },
      {
        value: 'UTC+4',
        label: 'UTC+4',
      },
      {
        value: 'UTC+5',
        label: 'UTC+5',
      },
      {
        value: 'UTC+6',
        label: 'UTC+6',
      },
      {
        value: 'UTC+7',
        label: 'UTC+7',
      },
    ],
    isItemDisabled: item => item.value === 'UTC+2',
  });

  return (
    <VStack gap={8}>
      <Select collection={collection}>
        <SelectButtonTag>
          <Earth />
          <SelectButtonTagValue placeholder='Timezone' />
        </SelectButtonTag>

        <SelectPositioner>
          <SelectContent>
            {collection.items.map(skill => (
              <SelectOption key={skill.value} item={skill}>
                <SelectOptionText>{skill.label}</SelectOptionText>
                <SelectOptionIndicator />
              </SelectOption>
            ))}
          </SelectContent>
        </SelectPositioner>
      </Select>

      <Select collection={collection}>
        <SelectButtonTag size='large'>
          <Earth />
          <SelectButtonTagValue placeholder='Timezone' />
        </SelectButtonTag>

        <SelectPositioner>
          <SelectContent>
            {collection.items.map(skill => (
              <SelectOption key={skill.value} item={skill}>
                <SelectOptionText>{skill.label}</SelectOptionText>
                <SelectOptionIndicator />
              </SelectOption>
            ))}
          </SelectContent>
        </SelectPositioner>
      </Select>
    </VStack>
  );
};
```

### With icons

An icon beside the label, carrying the kind of thing rather than its state.

```tsx
import { Earth, Info } from '@wallarm-org/design-system/icons';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';
import { Tag } from '@wallarm-org/design-system/Tag';

export const WithIcons = () => (
  <VStack gap={12} align='stretch'>
    <VStack gap={8}>
      <HStack gap={8}>
        <Tag size='medium'>
          <Earth />
          Tag with left icon
        </Tag>
        <Tag size='medium'>
          Tag with right icon
          <Info />
        </Tag>
        <Tag size='medium'>
          <Earth />
          Tag with left and right icons
          <Info />
        </Tag>
      </HStack>
    </VStack>
    <VStack gap={8}>
      <HStack gap={8}>
        <Tag size='large'>
          <Earth />
          Tag with left icon
        </Tag>
        <Tag size='large'>
          Tag with right icon
          <Info />
        </Tag>
        <Tag size='large'>
          <Earth />
          Tag with left and right icons
          <Info />
        </Tag>
      </HStack>
    </VStack>
  </VStack>
);
```

### With on click

A plain click handler, for a chip that navigates or opens rather than toggling — but not as a
link, which Carbon rules out for tags.

```tsx
import { Tag } from '@wallarm-org/design-system/Tag';

export const WithOnClick = () => (
  <Tag onClick={onTagClick}>
    Click me
  </Tag>
);
```

## Props

| Prop           | Type                                                  | Default  | Description |
| -------------- | ----------------------------------------------------- | -------- | ----------- |
| title          | `string \| undefined`                                 |          |             |
| defaultChecked | `boolean \| undefined`                                |          |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`  |          |             |
| autoFocus      | `boolean \| undefined`                                |          |             |
| id             | `string \| undefined`                                 |          |             |
| tabIndex       | `number \| undefined`                                 |          |             |
| rel            | `string \| undefined`                                 |          |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`         |          |             |
| disabled       | `{ true: string; false: string; }`                    | `false`  |             |
| size           | `"small" \| "medium" \| "large" \| null \| undefined` | `medium` |             |
| asChild        | `boolean \| undefined`                                | `false`  |             |
| data-testid    | `string \| undefined`                                 |          |             |

### TagClose

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |             |
| disabled       | `boolean \| undefined`                               |         |             |
| name           | `string \| undefined`                                |         |             |
| value          | `string \| number \| readonly string[] \| undefined` |         |             |
| data-testid    | `string \| undefined`                                |         |             |

## Explorer