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

# Insignă

> Afișați informații compacte în linie cu conținut furnizat de apelant.

## Prezentare generală

`Badge` afișează informații compacte în linie, inclusiv etichete scurte și numărători. Folosiți [Tag](https://docs.twenty.com/ro/ui/primitives/data-display/tag.md) pentru categorii, [Chip](https://docs.twenty.com/ro/ui/primitives/data-display/chip.md) pentru controale compacte sau [Status](https://docs.twenty.com/ro/ui/primitives/data-display/status.md) pentru o stare denumită cu un indicator.

**Light**

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

**Dark**

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

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-badge--display)

## Utilizare

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

export const PreviewLabel = () => <Badge>Preview</Badge>;
```

Transmiteți text, numere sau noduri ca elemente copil. Badge afișează conținutul pe care îl furnizați și nu adaugă nicio formatare pentru numărare sau reguli de vizibilitate. Elementul implicit este un `span` neinteractiv.

## Cu o pictogramă

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

export const AttachmentLabel = () => (
  <Badge>
    <IconPaperclip size={12} aria-hidden />
    Attachment
  </Badge>
);
```

Pictogramele sunt noduri copil obișnuite. Atribuiți pictogramelor decorative `aria-hidden` și păstrați o etichetă vizibilă pentru a explica conținutul.

## Aspect

**Light**

[Dimensiuni și forme ale ecusonului (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Dimensiuni și forme ale ecusonului (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-badge--catalog)

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

export const BadgeAppearances = () => (
  <Text style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
    <Badge size="sm" color="tertiary" shape="pill">
      Preview
    </Badge>
    <Badge size="md" color="inherit">
      In review
    </Badge>
    <Badge size="xs" color="primary" shape="circle">
      3
    </Badge>
    <Badge size="xs" color="secondary" shape="circle">
      12
    </Badge>
    <Badge color="accent">Last used</Badge>
  </Text>
);
```

`size` acceptă `xs`, `sm` sau `md`. `color` acceptă `tertiary`, `inherit`, `primary`, `secondary` sau `accent`. Stilul `accent` asociază o umplere accent-tertiary cu text accent11 în ambele teme. Tratamentul solid `primary` își păstrează umplerea albastră și textul pentru accent. `shape` acceptă `pill` sau `circle`. Valorile implicite sunt `sm`, `tertiary` și `pill`. Varianta circulară are o lățime fixă egală cu înălțimea sa. Utilizați `pill` pentru conținut mai lung, inclusiv pentru numărători abreviate.

**Light**

[Culorile textului ecusonului (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Culorile textului ecusonului (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--colors\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-badge--colors)

**Light**

[Insigne cu accent discret în temele deschisă și închisă (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--accent\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Insigne cu accent discret în temele deschisă și închisă (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--accent\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-badge--accent)

## Numărători și vizibilitate

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

type InboxButtonProps = {
  count: number;
};

export const InboxButton = ({ count }: InboxButtonProps) => (
  <Button aria-label={`Inbox, ${count} unread messages`}>
    Inbox
    {count > 0 && (
      <Badge size="xs" color="primary" shape="pill" aria-hidden>
        {count > 99 ? '99+' : count}
      </Badge>
    )}
  </Button>
);
```

Aplicația dvs. gestionează formatarea numerelor, abrevierile, limitarea, vizibilitatea valorii zero și etichetele traduse. Includeți semnificația completă în numele accesibil al controlului înconjurător atunci când numărătoarea sa compactă este decorativă. Un Badge independent poate utiliza atribute accesibile native, inclusiv `aria-label` sau `aria-labelledby`.

## Compoziție nativă

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

export const BuildStatus = () => {
  const badgeRef = useRef<HTMLSpanElement>(null);

  return (
    <Badge ref={badgeRef} title="Current build status" data-build="preview">
      Preview
    </Badge>
  );
};
```

Atributele native, gestionarii de evenimente, `className`, `style` și `ref` vizează elementul rădăcină efectiv. `render` acceptă un element sau un callback prin compoziția Base UI. Alegeți un element gazdă nativ adecvat pentru conținut interactiv:

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

export const ReleaseLink = () => (
  <Badge render={<Button href="#release-notes" size="sm" />}>
    Release notes
  </Badge>
);
```

Componenta Button redată gestionează comportamentul de navigare și semantica linkului. Badge își păstrează valoarea implicită de prezentare și nu deduce interacțiunea din conținutul său.

## Proprietăți

Tipurile și valorile implicite sunt generate din tipul public `BadgeProps`. Sunt acceptate și atributele native și gestionarii de evenimente.

**children** `ReactNode`

Caller-provided text, numbers, icons, or other inline content.

**color** `"accent" | "inherit" | "primary" | "secondary" | "tertiary"` (default: tertiary)

Neutral tertiary, inherited text, solid primary accent, soft accent tint, or secondary treatment.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the default span. Native props, handlers, and the ref target the rendered element.

**shape** `"circle" | "pill"` (default: pill)

Rounded pill label or fixed circle with width equal to its height. Use pill for longer content.

**size** `"md" | "sm" | "xs"` (default: sm)

Compact height, font size, and spacing: xs, sm, or md.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.