Separator

Horizontal

The default orientation. Spans the full width of its container.

Above the line

Below the line

import { Separator } from '@eekodigital/raster';

<Separator />

Vertical

Set orientation="vertical" to divide inline content. The separator fills the height of its flex container.

Left

Right

<Separator orientation="vertical" />

Decorative vs semantic

By default decorative={true} renders the element with role="none" — screen readers skip it. Set decorative={false} when the divider conveys meaningful structure; it will then carry role="separator".

Props

Prop	Type	Default	Description
orientation	”horizontal” | “vertical"	"horizontal”	Direction of the divider.
decorative	boolean	true	When true the element is hidden from assistive technology.
className	string	—	Additional CSS classes.