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

# Значок

> Отображение компактной встроенной информации с содержимым, предоставленным вызывающей стороной.

## Обзор

`Badge` отображает компактную встроенную информацию, включая короткие метки и количества. Используйте [Tag](https://docs.twenty.com/ru/ui/primitives/data-display/tag.md) для категорий, [Chip](https://docs.twenty.com/ru/ui/primitives/data-display/chip.md) для компактных элементов управления или [Status](https://docs.twenty.com/ru/ui/primitives/data-display/status.md) для именованного состояния с индикатором.

**Light**

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

**Dark**

[Пример 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)

## Использование

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

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

Передавайте текст, числа или узлы в качестве дочерних элементов. Badge отображает предоставленное вами содержимое и не добавляет форматирование количества или правила видимости. Элементом по умолчанию является неинтерактивный `span`.

## С иконкой

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

Иконки являются обычными дочерними узлами. Задайте для декоративных иконок `aria-hidden` и оставьте видимую метку, поясняющую содержимое.

## Внешний вид

**Light**

[Размеры и формы бейджей (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Размеры и формы бейджей (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` принимает значения `xs`, `sm` или `md`. `color` принимает `tertiary`, `inherit`, `primary`, `secondary` или `accent`. Вариант `accent` сочетает заливку accent-tertiary с текстом accent11 в обеих темах. Сплошной вариант `primary` сохраняет синюю заливку и текст на акцентном фоне. `shape` принимает значения `pill` или `circle`. Значения по умолчанию: `sm`, `tertiary` и `pill`. Круглый вариант имеет фиксированную ширину, равную его высоте. Используйте `pill` для более длинного содержимого, включая сокращенные количества.

**Light**

[Цвета текста бейджей (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--colors\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Цвета текста бейджей (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**

[Мягкие акцентные бейджи в светлой и тёмной темах (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-badge--accent\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Мягкие акцентные бейджи в светлой и тёмной темах (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)

## Количество и видимость

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

Ваше приложение отвечает за форматирование чисел, сокращения, ограничение значений, видимость нуля и переведенные метки. Если компактное количество является декоративным, укажите его полное значение в доступном имени окружающего элемента управления. Автономный Badge может использовать нативные атрибуты доступности, включая `aria-label` или `aria-labelledby`.

## Нативная композиция

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

Нативные атрибуты, обработчики событий, `className`, `style` и `ref` применяются к фактическому корневому элементу. `render` принимает элемент или обратный вызов через композицию Base UI. Выберите подходящий нативный элемент-владелец для интерактивного содержимого:

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

Отрисованный Button отвечает за поведение навигации и семантику ссылки. Badge сохраняет свое представительное поведение по умолчанию и не определяет интерактивность на основе содержимого.

## Свойства

Типы и значения по умолчанию генерируются из публичного типа `BadgeProps`. Также поддерживаются нативные атрибуты и обработчики событий.

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