## Usage

The `<Tag />` component forms a relationship to another component, displaying chosen attributes and optionally provides a quick removal step in the form of an `X` button. A common usage is to present multi-selected options in a search input.

NOTE: For communicating statuses or numeric tallies, use the [Badge](/packages/badge/) instead of a tag.

```tsx live
const initialLabels = ['First tag', 'Second tag', 'Third tag'];
const [labels, setLabels] = useState(initialLabels);

const onClickRemove = (labelToRemove: string) =>
  setLabels((prevLabels) => prevLabels.filter((prevLabel) => prevLabel !== labelToRemove));

return (
  <Flex gap="small" flexWrap="wrap">
    {labels.map((label) => (
      <Tag key={label} label={label} onClickRemove={() => onClickRemove(label)} />
    ))}
  </Flex>
);
```

## Tone

A tag supports three types of tones: `informative` (default), `neutral`, and decorative. The `informative` tone is used when more emphasis is required. If a tag requires less attention from the user, the `neutral` tone should be used. Decorative tones have no semantic meaning; they provide additional colour options for categorisation and visual variety.

### Basic Tones

```tsx live
<Flex gap="small">
  <Tag label="Informative" />
  <Tag label="Informative" weight="outlined" />
  <Tag label="Neutral" tone="neutral" />
  <Tag label="Neutral" tone="neutral" weight="outlined" />
</Flex>
```

### Decorative Tones

Decorative tones have no semantic meaning; they are purely for categorisation and visual variety:

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Tag label="Apricot" tone="decorativeApricot" />
  <Tag label="Azure" tone="decorativeAzure" />
  <Tag label="Berry" tone="decorativeBerry" />
  <Tag label="Coffee" tone="decorativeCoffee" />
  <Tag label="Indigo" tone="decorativeIndigo" />
  <Tag label="Rose" tone="decorativeRose" />
  <Tag label="Teal" tone="decorativeTeal" />
</Flex>
```

```tsx live
<Flex gap="small" flexWrap="wrap">
  <Tag label="Apricot" tone="decorativeApricot" weight="outlined" />
  <Tag label="Azure" tone="decorativeAzure" weight="outlined" />
  <Tag label="Berry" tone="decorativeBerry" weight="outlined" />
  <Tag label="Coffee" tone="decorativeCoffee" weight="outlined" />
  <Tag label="Indigo" tone="decorativeIndigo" weight="outlined" />
  <Tag label="Rose" tone="decorativeRose" weight="outlined" />
  <Tag label="Teal" tone="decorativeTeal" weight="outlined" />
</Flex>
```

## Weight

A tag has two available weights: `outline` and `filled` (default). Use the `filled` weight for filters, multiselects and attachments, and use the `outline` weight alongside a component to highlight an attribute.

```tsx live
<Flex gap="small">
  <Tag label="Filled" />
  <Tag label="Filled" tone="neutral" />
  <Tag label="Outlined" weight="outlined" />
  <Tag label="Outlined" tone="neutral" weight="outlined" />
</Flex>
```

## Size

The tag supports two sizes, `small` and `medium` (default). `small` is suitable for tables or in small multiselect and `medium` in medium multiselect, to display attachments or in quick filters.

```tsx live
<Flex gap="small">
  <Tag label="Small tag" size="small" />
  <Tag label="Medium tag" />
</Flex>
```

## Removable tag

When you need a tag to be removable you can use the optional `onClickRemove` prop to pass a function that controls the visibility state of the tag or group of tags. This will render an `X` button inside the tag.

```tsx live
const [showTag, setShowTag] = useState(true);
const onClickRemove = () => setShowTag(false);

return <>{showTag && <Tag label="Removable tag" onClickRemove={onClickRemove} />}</>;
```

## Icon

An `icon` can be added to help clarify the label and is rendered on the left. The icon is dynamically sized based on the tag's `size` prop.

```tsx live
<Flex gap="small">
  <Tag label="Icon small" icon={CheckIcon} size="small" />
  <Tag label="Icon medium" icon={CheckIcon} />
</Flex>
```

## Disabled

Use the `disabled` prop when certain tags represent locked or fixed attributes that shouldn't be altered.

```tsx live
<Flex gap="small">
  <Tag label="Label" disabled />
  <Tag
    label="Removable"
    onClickRemove={() => {
      /* noop */
    }}
    disabled
  />
  <Tag label="Icon" icon={CheckIcon} disabled />
</Flex>
```

## Max width

By default, the tag has a max width of `12.5rem` (usually 200px). This is customisable via the `maxWidth` prop.

```tsx live
<Tag maxWidth="15rem" label="Long labels will be truncated with an ellipsis" onClickRemove={() => {}} />
```

Tags show attributes of related components.

Accessibility

Responsive layouts

Tokens

Foundations

a11y

Accordion

Actions

AddressInput

AppLayout

Avatar

Badge

Blanket

Breadcrumbs

BulkActionBar

Button

Card

Checkbox

Core

DateDropdown

DateInput

Divider

EmptyState

Field

Fieldset

FileInput

Filtering

Flex

Grid

Heading

Icon

Illustration

Link

List

Loading

Modal

Notice

PageHeader

Pagination

PhoneInput

Popover

Radio

RailTrack

RichTextEditor

ScrollWrap

SearchInput

SelectDropdown

SelectInput

ShowMore

Table

Tabs

Text

TextAreaInput

TextInput

Toast

Toggle

Tooltip

Utils

Utils - NextJS

Components

Forms

Search

Tables

Patterns

Introduction

Product tone and voice

Capitalisation

Date and time

Inclusive design

Content

Welcome to EDS

Start designing

Start developing

Contributing

Releases

The EDS way

Coding style guide

Guide to Pendo

Setting up the EDS repo

Creating a new component

Automated testing

PR and changeset process

Publishing snapshots

Publishing packages

Monorepo tools

Team resources