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

# HorizontalSeparator

> Separate adjacent content with a line and an optional label.

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>
  </>;

`HorizontalSeparator` is a visual divider with optional text. It has no interaction or state and does not render native `hr` semantics.

<StoryEmbed storyId="ui-layout-horizontalseparator--default" title="HorizontalSeparator example" />

## Usage

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

export const ImportSources = () => (
  <>
    <Text>Import records from a CSV file.</Text>
    <HorizontalSeparator text="or" />
    <Text>Connect an external data source.</Text>
  </>
);
```

## Spacing and visibility

Omit `text` for one continuous line. `noMargin` removes the vertical margins. `visible={false}` hides the line while preserving the margins and any text. A custom `color` changes the line color; the default uses the medium border color.

Use headings to communicate document structure. If a separator must have semantic meaning, place the unlabeled component in a wrapper with `role="separator"`. Native attributes, event handlers, and children are not forwarded.

## Props

<ParamField body="color" type="string">
  CSS line color. Defaults to the medium border color.
</ParamField>

<ParamField body="noMargin" type="boolean" default="false">
  Removes the vertical margins.
</ParamField>

<ParamField body="text" type="string" default="">
  Optional label displayed between two lines.
</ParamField>

<ParamField body="visible" type="boolean" default="true">
  Shows the dividing line. Setting it to false preserves margins and any text.
</ParamField>