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

# Разделитель с меткой

> Разделяйте содержимое текстовой меткой, выровненной по центру или по краю.

## Обзор

`LabeledSeparator` объединяет [Separator](https://docs.twenty.com/ru/ui/primitives/layout/separator.md) и [Text](https://docs.twenty.com/ru/ui/primitives/typography/text.md) в именованный горизонтальный разделитель. Ваше приложение задает метку и окружающие отступы.

**Light**

[Разделитель с меткой между вариантами импорта (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Разделитель с меткой между вариантами импорта (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:dark)

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

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

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';
import { Button } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportOptions = () => (
  <Text
    style={{
      display: 'grid',
      gap: 'var(--t-spacing-3)',
      width: 320,
      maxWidth: '100%',
    }}
  >
    <Button fullWidth>Import a CSV file</Button>
    <LabeledSeparator>Or</LabeledSeparator>
    <Button fullWidth variant="outline">
      Connect a data source
    </Button>
  </Text>
);
```

## Расположение и тон метки

`labelPosition` по умолчанию имеет значение `center`, при этом линия располагается с каждой стороны метки. Используйте `end`, чтобы разместить метку после начальной линии. Метка принимает строку, заданную и локализованную вашим приложением.

`tone` по умолчанию имеет значение `neutral`. Используйте `danger` для красного маркера с меткой средней насыщенности и более толстой линией. Установите `hasStartMarker`, чтобы добавить небольшую декоративную заглушку в начало линии.

Необязательная заглушка соответствует [общему дизайну линии календаря и чата](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=118289-146574).

**Light**

[Маркер непрочитанных с меткой, выровненной по краю (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Маркер непрочитанных с меткой, выровненной по краю (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-layout-labeledseparator--unread-marker)

```tsx theme={null}
import { LabeledSeparator } from 'twenty-ui/components/layout';

export const UnreadMarker = () => (
  <LabeledSeparator
    labelPosition="end"
    tone="danger"
    hasStartMarker
    style={{ width: 488, maxWidth: '100%' }}
  >
    New
  </LabeledSeparator>
);
```

## Интервалы и состояние приложения

Компонент заполняет свой контейнер и не добавляет внешних отступов. Для отступов и выравнивания используйте интервалы родительского макета или нативные `style` и `className`. Сохраняйте в приложении смещения для соседних аватаров или позиций календаря.

Компонент отображает заданную метку. Ваше приложение определяет, где должна находиться граница непрочитанных или маркер календаря и когда он видим.

## Доступность и композиция

Корневой элемент предоставляет один горизонтальный разделитель с именем из его метки. Сегменты линии и необязательный начальный маркер являются декоративными, поэтому вспомогательные технологии не объявляют дополнительные разделители. При необходимости нативные доступные атрибуты могут задать другое имя или описание.

Нативные атрибуты, стили, имена классов и `ref` применяются к внешнему `div`. Используйте `render`, чтобы скомпоновать другой неинтерактивный элемент, передавая заданные props и ref. `LabeledSeparatorProps` экспортируется из `twenty-ui/components/layout`.

## Миграция

Замените фронтенд-компонент `LabeledDivider` на `LabeledSeparator`. Переименуйте `textPosition` в `labelPosition` и используйте `tone="danger"` для красного вида маркера непрочитанных. Удалите `noMargin`, поскольку внешние отступы по умолчанию равны нулю. При необходимости сохраните прежний интервал по умолчанию с помощью `style={{ marginBlock: 'var(--t-spacing-3)' }}`.

## Свойства

**children** `string` *required*

Text naming the separator. Supplied and localized by the caller.

**hasStartMarker** `boolean` (default: false)

Show a decorative cap at the beginning of the rule.

**labelPosition** `"center" | "end"` (default: center)

Place the label between two lines or at the end of one line.

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

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**tone** `"danger" | "neutral"` (default: neutral)

Neutral divider or red marker with a thicker rule.


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