Separator
Divisor visual fino para separar seções de conteúdo.
Demonstração
componentPages.separator_demo_horizontal
Seção A
Seção B
componentPages.separator_demo_vertical
Seção A
Seção B
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | componentPages.separator_prop_orientation |
decorative | boolean | true | componentPages.separator_prop_decorative |
className | string | — | componentPages.separator_prop_className |
Uso
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} />