> ## 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.

# Чип

> Отображает компактное содержимое, принадлежащее вызывающей стороне, с необязательными начальными и конечными слотами.

## Обзор

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

**Light**

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

**Dark**

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

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

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

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

export const AssigneeChip = () => (
  <Chip
    variant="soft"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);
```

Дочерние элементы принимают текст или узлы. `startElement` и `endElement` принимают аватары, значки или другое содержимое. `endElementDivider` добавляет разделитель перед конечным содержимым. По умолчанию chip — это `div`; его слоты могут содержать отдельное действие, при этом сам chip остаётся презентационным.

Chip никогда не вставляет метку. При необходимости предоставьте переведённый резервный вариант из вашего приложения. Не указывайте children для содержимого, полностью состоящего из слотов. Интерактивному chip только со значком требуется доступное имя, предоставленное вызывающей стороной.

## Внешний вид

**Light**

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

**Dark**

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

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

`size` принимает значения `sm` или `md` с общей высотой 20px и 24px. `variant` принимает значения `ghost`, `soft`, `solid`, `plain` или `outline`; по умолчанию используется `ghost`. Чипы `plain` не имеют заливки в состоянии покоя или начального внутреннего отступа. Контурные чипы имеют заметную границу толщиной 1px, более светлую заливку в обычном состоянии и внутренний горизонтальный отступ 8px с каждой стороны при той же общей высоте, что и у других вариантов. Интерактивные чипы `plain` и `outline` используют фоны `ghost` при наведении и нажатии, курсор-указатель и кольцо фокуса. Используйте `shape="round"` для формы таблетки, `weight="medium"` для выделения и `color="secondary"` для вторичного текста.

## Кнопки и ссылки

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

type AssigneeActionProps = {
  onOpenAssignee: () => void;
  disabled?: boolean;
};

export const AssigneeAction = ({
  onOpenAssignee,
  disabled,
}: AssigneeActionProps) => (
  <Chip
    render={<button type="button" disabled={disabled} />}
    onClick={onOpenAssignee}
    aria-label="Open Jane's record"
    startElement={
      <Avatar name="Jane" size="sm" shape="circle" imageProps={{ alt: '' }} />
    }
  >
    Jane
  </Chip>
);
```

Указание `onClick` сохраняет `div` по умолчанию. Используйте `render` для компоновки явной нативной кнопки, якоря, ссылки маршрутизатора или другого подходящего владельца. Нативные атрибуты, обработчики, стили и корневая ссылка достигают этого владельца. Нативная кнопка обеспечивает активацию с клавиатуры и поведение в отключённом состоянии. Chip распознаёт нативное отключённое состояние и `aria-disabled` для внешнего вида; один только `aria-disabled` не предотвращает активацию.

`clickable` управляет внешним видом при наведении и указателе и по умолчанию зависит от того, указан ли `onClick`. Явно укажите его для ссылки без обработчика клика. Не вкладывайте кнопки или ссылки внутрь chip, который сам является интерактивным.

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

export const DocumentationChip = () => (
  <Chip
    variant="outline"
    shape="round"
    render={<a href="https://twenty.com/developers" />}
    clickable
  >
    Documentation
  </Chip>
);
```

Текст URL остаётся обычным текстом. Преднамеренные ссылки должны находиться в содержимом вызывающей стороны или в явной компоновке корневого элемента.

## Обрезка и всплывающие подсказки

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

export const FileChip = () => (
  <Chip variant="soft" maxWidth={180} tooltipPlace="top">
    Quarterly customer research.pdf
  </Chip>
);
```

`maxWidth` ограничивает ширину отображаемого чипа в пикселях, включая внутренние отступы и границу обводки. То же ограничение применяется к простым чипам с асимметричными внутренними отступами. По умолчанию содержимое обрезается с многоточием; `truncate={false}` оставляет его без ограничений обрезки. Строковые children предоставляют собственный текст всплывающей подсказки. Укажите `tooltipContent` для пользовательского текста или содержимого узла, `tooltipDelay` для задержки открытия и `isTooltipMultiline` для сохранения разрывов строк. `alwaysShowTooltip` также включает всплывающую подсказку, когда содержимое помещается. Эти параметры соответствуют [OverflowingTextWithTooltip](https://docs.twenty.com/ru/ui/primitives/typography/overflowing-text-with-tooltip.md). Сохраняйте доступность важной информации без зависимости от наведения.

## Миграция

Замените `emptyLabel` резервными children, предоставленными вызывающей стороной, а `forceEmptyText` или `isLabelHidden` — отсутствующими children. Храните переведённые резервные варианты продукта в приложении. Замените `tooltipLabel` на `tooltipContent`. Перенесите `disabled` к явному интерактивному владельцу и удалите `nativeButton`. Добавьте нативную кнопку или ссылку через `render` везде, где chip ранее полагался на `onClick` для выбора своего элемента.

Переопределения начального внутреннего отступа замените на `variant="plain"`. Оставляйте `clickable` включенным для нативных ссылок и кнопок, которым требуется обратная связь при наведении и нажатии.

## Свойства

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

**alwaysShowTooltip** `boolean` (default: false)

Shows the content tooltip even when the content is not truncated.

**children** `ReactNode`

Caller-owned content. Missing or empty children add no fallback label.

**clickable** `boolean` (default: isDefined(onClick))

Enables hover and pointer styling. Defaults to whether `onClick` is supplied; does not change the default div or add keyboard behavior.

**color** `"primary" | "secondary"` (default: primary)

Primary or secondary text color.

**endElement** `ReactNode`

Content after the label. Avoid interactive content when the chip itself is a button or link.

**endElementDivider** `boolean` (default: false)

Adds a divider before `endElement` when that slot has content.

**isTooltipMultiline** `boolean`

Preserves line breaks in the tooltip text.

**maxWidth** `number`

Maximum rendered chip width in pixels, including its leading and trailing padding and any outline border.

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

Replaces the default div. Compose a native button or link explicitly; that owner supplies disabled and native interaction behavior.

**shape** `"round" | "square"` (default: square)

Square or round corners.

**size** `"md" | "sm"` (default: sm)

Visual size of the chip.

**startElement** `ReactNode`

Content before the label, such as an avatar or icon.

**tooltipContent** `string`

Tooltip text. Defaults to string children. Supply text explicitly for node content.

**tooltipDelay** `number`

Delay in milliseconds before the tooltip opens.

**tooltipPlace** `"bottom" | "inline-end" | "inline-start" | "left" | "right" | "top"`

Position of the content tooltip.

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

Truncates overflowing content with an ellipsis. Defaults to true.

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

Background and border treatment. Outline has a strong border, lighter resting fill and 8px inline padding. Plain has no resting fill or leading padding. Both use ghost hover and pressed feedback when clickable.

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

Font weight of the content.


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