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

> Muestra contenido compacto propiedad del llamador con espacios opcionales al inicio y al final.

## Resumen

Usa `Chip` para referencias compactas a personas, registros o archivos. Usa [Tag](https://docs.twenty.com/es/ui/primitives/data-display/tag.md) para categorías de colores y [Status](https://docs.twenty.com/es/ui/primitives/data-display/status.md) para estados de flujo de trabajo.

**Light**

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

**Dark**

[Ejemplo 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)

## "Uso"

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

Los elementos secundarios aceptan texto o nodos. `startElement` y `endElement` aceptan avatares, iconos u otro contenido. `endElementDivider` añade un separador antes del contenido final. El chip predeterminado es un `div`; sus ranuras pueden contener una acción independiente mientras el propio chip sigue siendo de presentación.

Chip nunca inserta una etiqueta. Proporciona una alternativa traducida desde tu aplicación cuando sea necesario. Omite los elementos secundarios para el contenido compuesto íntegramente por ranuras. Un chip interactivo con solo un icono necesita un nombre accesible proporcionado por quien lo llama.

## Apariencia

**Light**

[Variantes y tamaños de chip (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-chip--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Variantes y tamaños de chip (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` acepta `sm` o `md`, con alturas totales de 20px y 24px. `variant` acepta `ghost`, `soft`, `solid`, `plain` u `outline`; `ghost` es el valor predeterminado. Los chips simples no tienen relleno en reposo ni relleno inicial. Los chips de contorno tienen un borde marcado de 1px, un relleno en reposo más claro y un relleno interno horizontal de 8px a cada lado, con la misma altura total que las demás variantes. Los chips simples y de contorno en los que se puede hacer clic usan los fondos de `ghost` al pasar el cursor y al presionar, el cursor de puntero y el anillo de enfoque. Usa `shape="round"` para una píldora, `weight="medium"` para dar énfasis y `color="secondary"` para texto secundario.

## Botones y enlaces

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

Proporcionar `onClick` mantiene el `div` predeterminado. Usa `render` para componer un botón nativo explícito, un ancla, un enlace de enrutador u otro propietario adecuado. Los atributos nativos, controladores, estilos y la referencia raíz llegan a ese propietario. Un botón nativo proporciona activación mediante teclado y comportamiento deshabilitado. Chip reconoce el estado nativo deshabilitado y `aria-disabled` para la apariencia; `aria-disabled` por sí solo no impide la activación.

`clickable` controla la apariencia al pasar el cursor y del puntero, y su valor predeterminado depende de si se proporciona `onClick`. Establécelo explícitamente para un enlace sin un controlador de clic. No anides botones ni enlaces dentro de un chip que sea interactivo.

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

El texto de la URL sigue siendo texto sin formato. Los enlaces intencionados pertenecen al contenido de quien llama o a la composición raíz explícita.

## Truncamiento y descripciones emergentes

```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` limita el ancho del chip renderizado en píxeles, incluido el relleno y cualquier borde de contorno. El mismo límite se aplica a los chips simples con relleno asimétrico. El contenido se trunca con puntos suspensivos de forma predeterminada; `truncate={false}` lo deja sin restricciones de truncamiento. Los elementos secundarios de tipo cadena proporcionan su propio texto de descripción emergente. Establece `tooltipContent` para texto personalizado o contenido de nodo, `tooltipDelay` para el retraso de apertura y `isTooltipMultiline` para conservar los saltos de línea. `alwaysShowTooltip` también habilita la descripción emergente cuando el contenido cabe. Estas opciones siguen [OverflowingTextWithTooltip](https://docs.twenty.com/es/ui/primitives/typography/overflowing-text-with-tooltip.md). Mantén la información esencial disponible sin depender de pasar el cursor.

## Migración

Reemplaza `emptyLabel` por elementos secundarios alternativos proporcionados por quien llama y reemplaza `forceEmptyText` o `isLabelHidden` por elementos secundarios omitidos. Mantén las alternativas de producto traducidas en la aplicación. Reemplaza `tooltipLabel` por `tooltipContent`. Mueve `disabled` al propietario interactivo explícito y elimina `nativeButton`. Agrega un botón o enlace nativo mediante `render` dondequiera que el chip se basara anteriormente en `onClick` para elegir su elemento.

Reemplace las anulaciones de relleno inicial por `variant="plain"`. Mantenga `clickable` habilitado para enlaces y botones nativos que necesiten respuesta visual al pasar el cursor y al presionar.

## "Props"

Los tipos y valores predeterminados se generan a partir de los tipos de componentes públicos. También se aceptan atributos nativos y controladores de eventos.

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