---
title: Separator
description: Separator is used to visually divide content sections with a horizontal or vertical line.
category: Layout
related: [Spacer, Container, Panel]
commonPatterns: [section-divider, content-separation]
---

Source: https://clickhouse.design/click-ui/separator

# Separator

Separator provides a visual divider between content sections. It can be displayed horizontally or vertically with different spacing sizes.

## Example

## Props

| Prop        | Type                                            | Default value  | Description                                                                                     |
| ----------- | ----------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------- |
| size        | `"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl"` | `"md"`         | Size/thickness of the separator line using predefined size tokens                               |
| orientation | `"horizontal" \| "vertical"`                    | `"horizontal"` | Direction of the separator - horizontal (divides vertically) or vertical (divides horizontally) |

```tsx
import { Separator } from '@clickhouse/click-ui'

<Separator size="md" orientation="horizontal" />
```

## Quick start

Use Separator to divide content sections:

```tsx
<Text>Section 1</Text>
<Separator size='md' orientation='horizontal' />
<Text>Section 2</Text>
```

## Related components

- **Spacer**: Use Spacer for spacing without visual divider
- **Container**: Use Container to layout content with separators
- **Panel**: Use Separator inside Panel to divide sections

## Common use cases

### Section divider

```tsx
import { Separator, Text, Container } from '@clickhouse/click-ui'

function SectionDivider() {
return (
  <Container orientation='vertical' gap='md'>
    <Text>Section 1</Text>
    <Separator size='md' orientation='horizontal' />
    <Text>Section 2</Text>
  </Container>
)
}
```

### Vertical separator

```tsx
import { Separator, Container } from '@clickhouse/click-ui'

function VerticalSeparator() {
return (
  <Container gap='md' style={{ height: '100px' }}>
    <Text>Left</Text>
    <Separator size='md' orientation='vertical' />
    <Text>Right</Text>
  </Container>
)
}
```

## Variants

### Horizontal separator

Content above

Content below

### Vertical separator

Left content

Right content

### Sizes

Content

Extra small spacing

Small spacing

Medium spacing

Large spacing