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

> Separate adjacent content with a horizontal or vertical divider.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`Separator` renders a `div` with `role="separator"` and an accessible orientation. It uses the Base UI separator contract, including native props, refs, and `render` composition. Import `SeparatorProps` from the same entry point.

<StoryEmbed storyId="ui-layout-separator--documentation" title="Horizontal separator" />

## Usage

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

## Orientation and appearance

`orientation` defaults to `horizontal`. Margins default to zero in both orientations. Horizontal separators fill the available width. Vertical separators stretch along their flex container. Give a standalone vertical separator a height. Control spacing through the parent layout, or use native `style` or `className` for explicit margins and line color. Base UI also accepts functions of the orientation for these props.

<StoryEmbed storyId="ui-layout-separator--vertical-documentation" title="Vertical separator" />

## Labeled dividers

Compose text and divider lines in a separate layout. Give the layout an accessible name and make the individual lines presentational.

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

export const LabeledDivider = () => (
  <Text
    role="separator"
    aria-label="or"
    style={{ display: 'flex', alignItems: 'center' }}
  >
    <Separator aria-hidden style={{ flex: 1, width: 'auto' }} />
    <Text render={<span />} style={{ marginInline: 'var(--t-spacing-2)' }}>
      or
    </Text>
    <Separator aria-hidden style={{ flex: 1, width: 'auto' }} />
  </Text>
);
```

## Migration

Replace the former horizontal helper with `Separator`. Remove `noMargin`, since margins now default to zero. To keep the former default spacing, add `style={{ marginBlock: 'var(--t-spacing-3)' }}`. Replace `color` with `style={{ backgroundColor: color }}`. Move `text` and `textPosition` into a labeled composition. Replace separators used only for invisible spacing with layout spacing.

## Props

<ParamField body="className" type="string | ((state: SeparatorState) => string | undefined)">
  CSS class or function of the separator orientation.
</ParamField>

<ParamField body="orientation" type="&#x22;horizontal&#x22; | &#x22;vertical&#x22;" default="horizontal">
  Direction of the divider: horizontal or vertical.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>">
  Element or render function composed with the native separator props and ref.
</ParamField>

<ParamField body="style" type="CSSProperties | ((state: SeparatorState) => CSSProperties | undefined)">
  Native style or function of the separator orientation. Use it for spacing and line color.
</ParamField>


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