Separator
Thin visual divider for separating content sections.
Live Demo
componentPages.separator_demo_horizontal
Section A
Section B
componentPages.separator_demo_vertical
Section A
Section B
Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | componentPages.separator_prop_orientation |
decorative | boolean | true | componentPages.separator_prop_decorative |
className | string | — | componentPages.separator_prop_className |
Usage
import { Separator } from '@ghiberti85/ui'
// Horizontal (default)
<div>
<Text>Section A</Text>
<Separator />
<Text>Section B</Text>
</div>
// Vertical — use inside a flex row
<div style={{ display: 'flex', alignItems: 'center', height: 24 }}>
<span>Left</span>
<Separator orientation="vertical" />
<span>Right</span>
</div>
// Semantic (not decorative) — announced to screen readers
<Separator decorative={false} />