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

> Afișează conținut compact deținut de apelant, cu sloturi opționale la început și la sfârșit.

## Prezentare generală

Utilizați `Chip` pentru referințe compacte la persoane, înregistrări sau fișiere. Utilizați [Etichetă](https://docs.twenty.com/ro/ui/primitives/data-display/tag.md) pentru categorii colorate și [Stare](https://docs.twenty.com/ro/ui/primitives/data-display/status.md) pentru stările fluxului de lucru.

**Light**

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

**Dark**

[Exemplu de 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)

## Utilizare

```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>
);
```

Elementele copil acceptă text sau noduri. `startElement` și `endElement` acceptă avatare, pictograme sau alt conținut. `endElementDivider` adaugă un separator înaintea conținutului de la final. Chipul implicit este un `div`; sloturile sale pot conține o acțiune separată, în timp ce chipul însuși rămâne prezentational.

Chip nu inserează niciodată o etichetă. Furnizați, când este necesar, o alternativă tradusă din aplicația dvs. Omiteți elementele copil pentru conținut alcătuit în întregime din sloturi. Un chip interactiv doar cu o pictogramă are nevoie de un nume accesibil furnizat de apelant.

## Aspect

**Light**

[Variante și dimensiuni ale chipului (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-chip--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variante și dimensiuni ale chipului (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` acceptă `sm` sau `md`, cu înălțimi totale de 20px și 24px. `variant` acceptă `ghost`, `soft`, `solid`, `plain` sau `outline`; `ghost` este valoarea implicită. Chipurile simple nu au umplere în starea de repaus sau padding la început. Jetoanele cu contur au o bordură pronunțată de 1px, un fundal mai deschis în starea de repaus și o umplere interioară inline de 8px pe fiecare parte, cu aceeași înălțime totală ca celelalte variante. Jetoanele plain și outline pe care se poate face clic folosesc fundalurile ghost la trecere și apăsare, cursorul indicator și conturul de focalizare. Utilizați `shape="round"` pentru o pastilă, `weight="medium"` pentru accentuare și `color="secondary"` pentru text secundar.

## Butoane și linkuri

```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>
);
```

Furnizarea `onClick` păstrează elementul `div` implicit. Utilizați `render` pentru a compune un buton nativ explicit, o ancoră, un link de router sau un alt element proprietar adecvat. Atributele native, handler-ele, stilurile și referința rădăcină ajung la acel element proprietar. Un buton nativ oferă activare de la tastatură și comportament dezactivat. Chip recunoaște starea nativă dezactivată și `aria-disabled` pentru aspect; `aria-disabled` singur nu împiedică activarea.

`clickable` controlează aspectul la survolare și al indicatorului și, implicit, depinde de furnizarea lui `onClick`. Setați-l explicit pentru un link fără handler de clic. Nu imbricați butoane sau linkuri într-un chip care este el însuși interactiv.

```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>
);
```

Textul URL rămâne text simplu. Linkurile intenționate aparțin conținutului apelantului sau compoziției explicite a rădăcinii.

## Trunchiere și indicii informative

```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` limitează lățimea chipului redat în pixeli, inclusiv spațierea interioară și orice bordură de contur. Aceeași limită se aplică cipului simplu cu spațiere interioară asimetrică. Conținutul este trunchiat implicit cu puncte de suspensie; `truncate={false}` îl lasă neconstrâns de trunchiere. Elementele copil de tip șir furnizează propriul text pentru indiciul informativ. Setați `tooltipContent` pentru text personalizat sau conținut de tip nod, `tooltipDelay` pentru întârzierea la deschidere și `isTooltipMultiline` pentru a păstra întreruperile de linie. `alwaysShowTooltip` activează, de asemenea, indiciul informativ atunci când conținutul încape. Aceste opțiuni urmează [OverflowingTextWithTooltip](https://docs.twenty.com/ro/ui/primitives/typography/overflowing-text-with-tooltip.md). Păstrați informațiile esențiale disponibile fără a vă baza pe trecerea cursorului.

## Migrare

Înlocuiți `emptyLabel` cu elemente copil de rezervă furnizate de apelant și înlocuiți `forceEmptyText` sau `isLabelHidden` cu elemente copil omise. Păstrați în aplicație alternativele traduse ale produsului. Înlocuiți `tooltipLabel` cu `tooltipContent`. Mutați `disabled` la elementul interactiv explicit și eliminați `nativeButton`. Adăugați un buton nativ sau un link prin `render` oriunde chipul se baza anterior pe `onClick` pentru a-și alege elementul.

Înlocuiți suprascrierile spațierii interioare din partea inițială cu `variant="plain"`. Mențineți `clickable` activat pentru linkurile și butoanele native care necesită feedback la trecerea cursorului și la apăsare.

## Proprietăți

Tipurile și valorile implicite sunt generate din tipurile publice ale componentei. Sunt acceptate și atributele native, precum și gestionarele de evenimente.

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