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

# Separator

> Separați conținutul adiacent cu un separator orizontal sau vertical.

## Prezentare generală

`Separator` redă un `div` cu `role="separator"` și o orientare accesibilă. Utilizează contractul de separator Base UI, inclusiv proprietăți native, referințe și compunerea `render`. Importă `SeparatorProps` din același punct de intrare.

**Light**

[Separator orizontal (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Separator orizontal (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--display\&viewMode=story\&globals=colorScheme:dark)

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

## Utilizare

```tsx theme={null}
import { Separator } from 'twenty-ui/primitives/layout';
import { Text } from 'twenty-ui/primitives/typography';

export const ImportSources = () => (
  <Text style={{ display: 'grid', gap: 'var(--t-spacing-3)' }}>
    <Text>Import records from a CSV file.</Text>
    <Separator />
    <Text>Connect an external data source.</Text>
  </Text>
);
```

## Orientare și aspect

`orientation` are valoarea implicită `horizontal`. Marginile au valoarea implicită zero în ambele orientări. Separatoarele orizontale umplu lățimea disponibilă. Separatoarele verticale se întind de-a lungul containerului lor flex. Oferă unui separator vertical independent o înălțime. Controlează spațierea prin aspectul părinte sau utilizează `style` nativ sau `className` pentru margini explicite și culoarea liniei. Base UI acceptă, de asemenea, funcții ale orientării pentru aceste proprietăți.

**Light**

[Separator vertical (light)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--vertical-documentation\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Separator vertical (dark)](https://storybook.twenty.com/iframe.html?id=ui-layout-separator--vertical-documentation\&viewMode=story\&globals=colorScheme:dark)

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

## Separatoare cu etichetă

Utilizați [LabeledSeparator](https://docs.twenty.com/ro/ui/components/layout/labeled-separator) pentru o etichetă text între liniile de separare sau la sfârșitul unei linii de separare. Acesta oferă aspectul și un singur nume accesibil pentru separator.

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

export const SignInDivider = () => <LabeledSeparator>Or</LabeledSeparator>;
```

## Migrare

Înlocuiește utilitarul orizontal anterior cu `Separator`. Elimină `noMargin`, deoarece marginile au acum valoarea implicită zero. Pentru a păstra spațierea implicită anterioară, adaugă `style={{ marginBlock: 'var(--t-spacing-3)' }}`. Înlocuiește `color` cu `style={{ backgroundColor: color }}`. Utilizați `LabeledSeparator` pentru separatoare etichetate, transmiteți eticheta ca children și redenumiți `textPosition` în `labelPosition`. Înlocuiește separatoarele utilizate doar pentru spațiere invizibilă cu spațiere de aspect.

## Proprietăți

**className** `string | ((state: SeparatorState) =\> string | undefined)`

CSS class or function of the separator orientation.

**orientation** `"horizontal" | "vertical"` (default: horizontal)

Direction of the divider: horizontal or vertical.

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

Element or render function composed with the native separator props and ref.

**style** `CSSProperties | ((state: SeparatorState) =\> CSSProperties | undefined)`

Native style or function of the separator orientation. Use it for spacing and line color.


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