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

# Separador

> Separa el contenido adyacente con un divisor horizontal o vertical.

## Resumen

`Separator` representa un `div` con `role="separator"` y una orientación accesible. Utiliza el contrato de separador de Base UI, incluidas las props nativas, las referencias y la composición mediante `render`. Importa `SeparatorProps` desde el mismo punto de entrada.

**Light**

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

**Dark**

[Separador horizontal (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)

## "Uso"

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

## Orientación y apariencia

`orientation` tiene como valor predeterminado `horizontal`. Los márgenes tienen como valor predeterminado cero en ambas orientaciones. Los separadores horizontales ocupan todo el ancho disponible. Los separadores verticales se estiran a lo largo de su contenedor flex. Asigna una altura a un separador vertical independiente. Controla el espaciado mediante el diseño principal o usa `style` o `className` nativos para establecer márgenes explícitos y el color de la línea. Base UI también acepta funciones de la orientación para estas props.

**Light**

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

**Dark**

[Separador 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)

## Divisores con etiqueta

Use [LabeledSeparator](https://docs.twenty.com/es/ui/components/layout/labeled-separator) para una etiqueta de texto entre líneas divisorias o al final de una regla. Proporciona el diseño y un único nombre de separador accesible.

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

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

## Migración

Reemplaza el antiguo asistente horizontal por `Separator`. Elimina `noMargin`, ya que los márgenes ahora tienen como valor predeterminado cero. Para conservar el espaciado predeterminado anterior, añade `style={{ marginBlock: 'var(--t-spacing-3)' }}`. Reemplaza `color` por `style={{ backgroundColor: color }}`. Use `LabeledSeparator` para divisores con etiqueta, pase la etiqueta como elementos secundarios y cambie el nombre de `textPosition` a `labelPosition`. Reemplaza los separadores que se usan solo para espaciado invisible por espaciado de diseño.

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