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

# Etichetta

> Contrassegna una categoria o un attributo con un colore del tema e un'icona facoltativa.

## Panoramica

Usa `Tag` per categorie, priorità o altri attributi brevi. Mantieni un'etichetta di testo affinché il significato non dipenda dal colore. Usa [Stato](https://docs.twenty.com/it/ui/primitives/data-display/status.md) quando ti serve un indicatore di stato e un feedback di caricamento.

**Light**

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

**Dark**

[Esempio di tag (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)

## Utilizzo

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

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

`color` è obbligatorio e accetta un colore del tema o `transparent`. L'elemento predefinito è sempre un `span`, anche quando viene fornito un gestore di clic nativo. Aggiungi un'icona decorativa con `startIcon`; l'etichetta ne fornisce il significato accessibile.

## Varianti

**Light**

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

**Dark**

[Varianti di tag (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` è lo stile predefinito. `solid` enfatizza l'etichetta, `outline` aggiunge un bordo e `ghost` rimuove lo sfondo. Usa `borderStyle="dashed"` con `outline` e `weight="medium"` per un'etichetta più evidente.

## Colori

**Light**

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

**Dark**

[Colori del tema dei tag (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)

Mantieni l'etichetta significativa senza fare affidamento sul suo colore. Il catalogo confronta il trattamento soft predefinito; la stessa tavolozza è disponibile per le altre varianti.

## Filtra per tag

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

Componi un elemento proprietario interattivo tramite `render`. Inserisci il relativo gestore di clic, gli attributi nativi, il ref e lo stato disabilitato su quell'elemento proprietario. Un vero pulsante fornisce l'attivazione tramite focus, Invio e Spazio. Lo stato di selezione appartiene alla tua applicazione; usa `aria-pressed` per un interruttore e uno stile visibile per lo stato selezionato. Per la navigazione, eseguire il rendering di un link con la relativa destinazione, ad esempio `<a href="/records" />`. I proprietari nativi mantengono l'aspetto di Tag.

## Etichette lunghe

Per impostazione predefinita, `truncate={true}` tronca le etichette di stringhe soggette a vincoli e ne mostra il testo completo in una descrizione comando al passaggio del mouse. Imposta `truncate={false}` per mantenere l'etichetta completa alla sua larghezza naturale senza tooltip, anche quando il relativo elemento padre è più stretto. Il layout dell'elemento padre gestisce l'andata a capo, lo scorrimento e il ritaglio.

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

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

I nodi figlio restano contenuti di proprietà del chiamante, quindi comporre direttamente il relativo testo, le traduzioni e i link intenzionali.

## Props

I tipi e i valori predefiniti vengono generati dai tipi di componenti pubblici. Sono accettati anche gli attributi nativi e i gestori di eventi.

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