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

# Separatore

> Separa i contenuti adiacenti con un divisore orizzontale o verticale.

## Panoramica

`Separator` esegue il rendering di un `div` con `role="separator"` e un orientamento accessibile. Utilizza il contratto del separatore di Base UI, incluse le proprietà native, i ref e la composizione `render`. Importa `SeparatorProps` dallo stesso punto di ingresso.

**Light**

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

**Dark**

[Separatore orizzontale (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)

## Utilizzo

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

## Orientamento e aspetto

`orientation` è impostato su `horizontal` per impostazione predefinita. I margini sono impostati su zero per impostazione predefinita in entrambi gli orientamenti. I separatori orizzontali occupano tutta la larghezza disponibile. I separatori verticali si estendono lungo il relativo contenitore flex. Assegna un'altezza a un separatore verticale autonomo. Controlla la spaziatura tramite il layout padre oppure usa `style` o `className` nativi per margini espliciti e il colore della linea. Base UI accetta anche funzioni dell'orientamento per queste proprietà.

**Light**

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

**Dark**

[Separatore verticale (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)

## Divisori con etichetta

Usa [LabeledSeparator](https://docs.twenty.com/it/ui/components/layout/labeled-separator) per un'etichetta di testo tra le linee di divisione o alla fine di un separatore. Fornisce il layout e un unico nome accessibile per il separatore.

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

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

## Migrazione

Sostituisci il precedente helper orizzontale con `Separator`. Rimuovi `noMargin`, poiché ora i margini sono impostati su zero per impostazione predefinita. Per mantenere la precedente spaziatura predefinita, aggiungi `style={{ marginBlock: 'var(--t-spacing-3)' }}`. Sostituisci `color` con `style={{ backgroundColor: color }}`. Usa `LabeledSeparator` per i separatori con etichetta, passa l'etichetta come children e rinomina `textPosition` in `labelPosition`. Sostituisci i separatori utilizzati solo per la spaziatura invisibile con la spaziatura del layout.

## Props

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