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

# Etichetă

> Etichetați o categorie sau un atribut cu o culoare de temă și o pictogramă opțională.

## Prezentare generală

Utilizați `Tag` pentru categorii, priorități sau alte atribute scurte. Păstrați o etichetă text, astfel încât semnificația să nu depindă de culoare. Utilizați [Stare](https://docs.twenty.com/ro/ui/primitives/data-display/status.md) când aveți nevoie de un indicator de stare și de feedback privind încărcarea.

**Light**

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

**Dark**

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

## Utilizare

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

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

`color` este obligatoriu și acceptă o culoare de temă sau `transparent`. Elementul implicit este întotdeauna un `span`, inclusiv atunci când este furnizat un gestionar de clic nativ. Adăugați o pictogramă decorativă cu `startIcon`; eticheta îi oferă semnificația accesibilă.

## Variante

**Light**

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

**Dark**

[Variante de etichetă (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` este stilul implicit. `solid` evidențiază eticheta, `outline` adaugă o bordură, iar `ghost` elimină fundalul. Utilizați `borderStyle="dashed"` cu `outline` și `weight="medium"` pentru o etichetă mai accentuată.

## Culori

**Light**

[Culori de temă pentru etichete (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-tag--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Culori de temă pentru etichete (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)

Păstrați eticheta semnificativă fără a vă baza pe culoarea sa. Catalogul compară stilul discret implicit; aceeași paletă este disponibilă pentru celelalte variante.

## Filtrați după o etichetă

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

Compune un proprietar interactiv prin `render`. Pune gestionarul său de clic, atributele native, ref și starea dezactivată pe acel proprietar. Un buton real oferă focalizare, activare cu Enter și Space. Starea de selecție aparține aplicației dvs.; utilizați `aria-pressed` pentru un comutator și un stil vizibil pentru starea selectată. Pentru navigare, redați un link cu destinația sa, cum ar fi `<a href="/records" />`. Proprietarii nativi păstrează aspectul Tag.

## Etichete lungi

În mod implicit, `truncate={true}` trunchiază etichetele de șir constrânse și expune textul lor complet într-un indiciu la trecerea cursorului. Setați `truncate={false}` pentru a păstra eticheta completă la lățimea sa naturală, fără o indicație contextuală, chiar și atunci când elementul său părinte este mai îngust. Dispunerea părinte gestionează încadrarea pe rânduri, derularea și decuparea.

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

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

Copiii nodului rămân conținut deținut de apelant, așa că compuneți direct textul, traducerile și linkurile intenționate ale acestora.

## Proprietăți

Tipurile și valorile implicite sunt generate din tipurile de componente publice. Sunt acceptate și atributele native, precum și gestionarii de evenimente.

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