Separator

Overview

Separator draws a thin dividing line to visually separate content or groups of controls. It’s built on Radix UI Separator and can run horizontally (the default) or vertically.

By default the separator is decorative, meaning it’s purely visual and hidden from assistive technology. If the line represents a meaningful boundary between sections of content, set decorative={false} so it’s exposed as a semantic separator to screen readers.

Usage

Import the component:

import { Separator } from "@eqtylab/equality";

Basic usage:

<Separator />

A vertical separator needs a parent with height to be visible:

<div className="flex h-12 items-center gap-4">
  <span>Left</span>
  <Separator orientation="vertical" />
  <span>Right</span>
</div>

Variants

Horizontal orientation (default)

Vertical orientation

Usage

<Separator orientation="horizontal" />
<Separator orientation="vertical" />

Props

Separator also accepts standard element attributes and className.