Separator
Separator provides a visual divider between content sections. It can be displayed horizontally or vertically with different spacing sizes.
Example
Content above
Content below
Left
Right
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop size | Type "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | Default value "md" | Description Size/thickness of the separator line using predefined size tokens |
Prop orientation | Type "horizontal" | "vertical" | Default value "horizontal" | Description Direction of the separator - horizontal (divides vertically) or vertical (divides horizontally) |
Quick Start
Use Separator to divide content sections:
<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
Section Title
Section content
Next Section
More content
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
Left content
Right content
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