# Tag

A static label that highlights an item's category or attribute.

Tabs: [Guidelines](/components/web/tag/tag.guidelines.md) · [Code](/components/web/tag/tag.code.md)

## Features

- Available in various colors

- Can optionally display an icon

## When to use

To highlight an item's status, use a [Badge](/components/web/badge/badge.guidelines) instead.

## Examples

### Variants

The component comes in different colors, which are based on our brand colors. These can be used interchangeably and are not tied to any specific meaning.

```tsx
<Stack space={16}>
    <Tag variant="pink">Pink</Tag>
    <Tag variant="yellow">Yellow</Tag>
    <Tag variant="green">Green</Tag>
    <Tag variant="purple">Purple</Tag>
    <Tag variant="gray">Gray</Tag>
</Stack>
```

### Icons

An icon can be added next to the label. This can help users understand a tag's meaning. Icons can also make tags more recognisable and distinguishable. This is helpful in scenarios where multiple tags are used on a page or within a list.

```tsx
<Stack space={16}>
    <Tag variant="pink" Icon={FlashCircle}>
        Pink
    </Tag>
    <Tag variant="yellow" Icon={CategoryMarketing}>
        Yellow
    </Tag>
    <Tag variant="green" Icon={EmotionSmiley}>
        Green
    </Tag>
    <Tag variant="purple" Icon={HighFive}>
        Purple
    </Tag>
    <Tag variant="gray" Icon={Sandwich}>
        Gray
    </Tag>
</Stack>
```

## Best practices

**Do:** Use to highlight an item's category or attribute..

**Don't:** Use to highlight an item's status. Use a Badge instead.

**Do:** Use short, descriptive labels.

**Don't:** Use long labels.

**Do:** Add an icon to support the tag's meaning.

**Don't:** Add an icon for purely aesthetic reasons.

## Related components

- [Badge](/components/web/badge/badge.guidelines): A static label that highlights an item's status.
- [Callout](/components/web/callout/callout.guidelines): Capture the attention of users and provide them with important feedback or information that relates to an entire page or page section.
- [Count](/components/web/count/count.guidelines): A static label that indicates the quantity of items.