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

> Separați conținutul cu o etichetă de text centrată sau aliniată la final.

## Prezentare generală

`LabeledSeparator` combină [Separator](https://docs.twenty.com/ro/ui/primitives/layout/separator.md) și [Text](https://docs.twenty.com/ro/ui/primitives/typography/text.md) într-un separator orizontal denumit. Aplicația dvs. furnizează eticheta și spațierea din jur.

**Light**

[Separator etichetat între opțiunile de import (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Separator etichetat între opțiunile de import (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)

## Utilizare

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

## Poziționarea și tonul etichetei

`labelPosition` este implicit `center`, cu o linie pe fiecare parte a etichetei. Folosiți `end` pentru a poziționa eticheta după linia de început. Eticheta acceptă un șir furnizat și localizat de aplicația dvs.

`tone` este implicit `neutral`. Folosiți `danger` pentru un marcator roșu cu o etichetă de grosime medie și o linie mai groasă. Setați `hasStartMarker` pentru a adăuga un mic capăt decorativ la începutul liniei.

Capătul opțional urmează [designul comun pentru liniile de calendar și chat](https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=118289-146574).

**Light**

[Marcator de necitit cu o etichetă aliniată la final (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-labeledseparator--unread-marker\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Marcator de necitit cu o etichetă aliniată la final (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>
);
```

## Spațierea și starea aplicației

Componenta umple containerul și nu adaugă nicio margine exterioară. Folosiți spațierea aspectului părinte sau `style` și `className` native pentru margini și aliniere. Păstrați în aplicația dvs. decalajele pentru avatarele adiacente sau pozițiile din calendar.

Componenta afișează eticheta furnizată. Aplicația dvs. decide unde aparține o limită de necitit sau un marcator de calendar și când este vizibilă.

## Accesibilitate și compunere

Rădăcina expune un separator orizontal denumit după eticheta sa. Segmentele liniei și marcatorul opțional de început sunt decorative, astfel încât tehnologia asistivă să nu anunțe separatoare suplimentare. Atributele native de accesibilitate pot furniza un nume sau o descriere diferită atunci când este necesar.

Atributele native, stilurile, numele de clase și `ref` vizează elementul `div` exterior. Folosiți `render` pentru a compune un alt element neinteractiv, transmițând în același timp proprietățile și ref-ul furnizate. `LabeledSeparatorProps` este exportat din `twenty-ui/components/layout`.

## Migrare

Înlocuiți `LabeledDivider` din frontend cu `LabeledSeparator`. Redenumiți `textPosition` în `labelPosition` și folosiți `tone="danger"` pentru aspectul roșu al marcatorului de necitit. Eliminați `noMargin`, deoarece marginile exterioare sunt implicit zero. Păstrați fosta spațiere implicită cu `style={{ marginBlock: 'var(--t-spacing-3)' }}` acolo unde este necesar.

## Proprietăți

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