Separator

A visual divider that separates content into distinct sections.

Import


import { Separator } from '@grannyshot/ui'

Usage


<p>Content above</p>
<Separator />
<p>Content below</p>

Orientation

Horizontal (default)


<Separator orientation="horizontal" />

Vertical


<div style={{ display: 'flex', alignItems: 'center', height: 24 }}>
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

Accessibility

The Separator renders with role="separator" and aria-orientation set to the current orientation value automatically.

Props

Prop	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Separator direction
`className`	`string`	—	Additional CSS classes

Extends all native <div> HTML attributes.