> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Тег

> Добавьте к категории или атрибуту метку с цветом темы и необязательным значком.

## Обзор

Используйте `Tag` для категорий, приоритетов и других кратких атрибутов. Сохраняйте текстовую метку, чтобы значение не зависело от цвета. Используйте [Статус](https://docs.twenty.com/ru/ui/primitives/data-display/status.md), если нужен индикатор состояния и обратная связь о загрузке.

**Light**

[Пример тега (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример тега (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--display)

## Использование

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const PriorityTag = () => <Tag color="red">Urgent</Tag>;
```

`color` обязателен и принимает цвет темы или `transparent`. Элемент по умолчанию всегда является `span`, в том числе при наличии нативного обработчика клика. Добавьте декоративный значок с помощью `startIcon`; метка обеспечивает его доступное значение.

## Варианты

**Light**

[Варианты тега (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Варианты тега (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--catalog)

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const CategoryTags = () => (
  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
    <Tag color="blue" variant="soft">
      Customer
    </Tag>
    <Tag color="green" variant="solid">
      Partner
    </Tag>
    <Tag color="orange" variant="outline">
      Prospect
    </Tag>
    <Tag color="transparent" variant="outline" borderStyle="dashed">
      Unassigned
    </Tag>
  </div>
);
```

`soft` — вариант оформления по умолчанию. `solid` выделяет метку, `outline` добавляет границу, а `ghost` убирает фон. Используйте `borderStyle="dashed"` с `outline` и `weight="medium"` для более заметной метки.

## Цвета

**Light**

[Цвета темы тега (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Цвета темы тега (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-tag--colors)

Сделайте метку понятной, не полагаясь на ее цвет. В каталоге сравнивается мягкое оформление по умолчанию; та же палитра доступна для других вариантов.

## Фильтр по тегу

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

type CategoryFilterProps = {
  selected: boolean;
  onToggle: () => void;
};

export const CategoryFilter = ({ selected, onToggle }: CategoryFilterProps) => (
  <Tag
    color="blue"
    variant={selected ? 'solid' : 'outline'}
    render={<button type="button" aria-pressed={selected} onClick={onToggle} />}
  >
    Customer
  </Tag>
);
```

Создайте интерактивный владеющий элемент с помощью `render`. Разместите его обработчик клика, нативные атрибуты, ref и состояние отключения на этом владеющем элементе. Настоящая кнопка обеспечивает фокус, активацию клавишами Enter и Space. Состояние выбора определяется вашим приложением; используйте `aria-pressed` для переключателя и видимое оформление для выбранного состояния. Для навигации отрисовывайте ссылку с указанием целевого адреса, например `<a href="/records" />`. Нативные владельцы сохраняют внешний вид Tag.

## Длинные метки

По умолчанию `truncate={true}` обрезает текстовые метки с ограниченной шириной и показывает их полный текст во всплывающей подсказке при наведении. Установите `truncate={false}`, чтобы сохранить полную метку в ее естественной ширине без всплывающей подсказки, даже если ее родительский элемент уже. Родительский макет управляет переносом, прокруткой и обрезкой.

```tsx theme={null}
import { Tag } from 'twenty-ui/primitives/data-display';

export const FullCategoryLabel = () => (
  <Tag color="green" truncate={false}>
    Enterprise customer
  </Tag>
);
```

Дочерние элементы Node остаются контентом, принадлежащим вызывающей стороне, поэтому компонуйте их текст, переводы и намеренно добавленные ссылки напрямую.

## Свойства

Типы и значения по умолчанию генерируются из публичных типов компонента. Также поддерживаются нативные атрибуты и обработчики событий.

**borderStyle** `"dashed" | "solid"` (default: solid)

Border style used by the outline variant.

**color** `"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "transparent" | "turquoise" | "violet" | "yellow"` *required*

Theme color for the tag, or `transparent` for an unfilled label.

**onClick** `MouseEventHandler\<HTMLSpanElement\>`

Native click handler. Does not change the default span or add keyboard activation.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, TagState\>`

Replaces the default span. Compose a button or link to provide explicit interaction semantics.

**startIcon** `ReactNode`

Decorative icon before the label. Hidden from assistive technology.

**truncate** `boolean` (default: true)

Truncates constrained string labels and exposes the full text in a tooltip. Set to `false` to keep the full label at its natural width without a tooltip, even inside a narrower parent.

**variant** `"ghost" | "outline" | "soft" | "solid"` (default: soft)

Visual treatment of the tag background and border.

**weight** `"medium" | "regular"` (default: regular)

Font weight of the label.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.