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

# Etiqueta

> Etiquete una categoría o atributo con un color del tema y un icono opcional.

## Resumen

Use `Tag` para categorías, prioridades u otros atributos breves. Conserve una etiqueta de texto para que el significado no dependa del color. Use [Estado](https://docs.twenty.com/es/ui/primitives/data-display/status.md) cuando necesite un indicador de estado y comentarios de carga.

**Light**

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

**Dark**

[Ejemplo de etiqueta (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)

## "Uso"

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

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

`color` es obligatorio y acepta un color del tema o `transparent`. El elemento predeterminado siempre es un `span`, incluso cuando se proporciona un controlador de clic nativo. Añada un icono decorativo con `startIcon`; la etiqueta proporciona su significado accesible.

## Variantes

**Light**

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

**Dark**

[Variantes de etiquetas (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` es el estilo predeterminado. `solid` resalta la etiqueta, `outline` añade un borde y `ghost` elimina el fondo. Use `borderStyle="dashed"` con `outline` y `weight="medium"` para una etiqueta más destacada.

## Colores

**Light**

[Colores del tema de las etiquetas (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Colores del tema de las etiquetas (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)

Mantén la etiqueta significativa sin depender de su color. El catálogo compara el tratamiento suave predeterminado; la misma paleta está disponible para las demás variantes.

## Filtrar por una etiqueta

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

Componga un propietario interactivo mediante `render`. Coloque su controlador de clic, atributos nativos, ref y estado deshabilitado en ese propietario. Un botón real proporciona foco y activación con Intro y Espacio. El estado de selección corresponde a su aplicación; use `aria-pressed` para un interruptor y un estilo visible para el estado seleccionado. Para la navegación, renderiza un enlace con su destino, como `<a href="/records" />`. Los propietarios nativos conservan la apariencia de Tag.

## Etiquetas largas

De forma predeterminada, `truncate={true}` trunca las etiquetas de texto con restricciones y muestra su texto completo en una descripción emergente al pasar el cursor. Establece `truncate={false}` para mantener la etiqueta completa en su ancho natural sin una descripción emergente, incluso cuando su elemento principal sea más estrecho. El diseño del elemento principal gestiona el ajuste de línea, el desplazamiento y el recorte.

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

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

Los elementos secundarios de nodo siguen siendo contenido propiedad del autor de la llamada, así que compón directamente su texto, traducciones y enlaces intencionales.

## "Props"

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

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