Separator

Examples

Overview

Built on Base UI Separator. Renders a hairline <div> using the --border-primary token, with both orientations stretching to fill their parent on the non-axis side.

import { Separator } from "@rogo-technologies/ui/separator";

<Separator />;

Usage

Orientation

Pass orientation="vertical" for inline dividers between elements. The vertical variant stretches to the parent's height, so put it inside a flex row with a defined height or set one via className.

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

Decorative vs semantic

By default the separator is decorative (role="none"), purely visual and skipped by screen readers. Pass decorative={false} when the separator carries semantic meaning between distinct regions; the component then exposes role="separator" and aria-orientation.

<Separator decorative={false} />

Spacing

The separator does not add its own margin. Apply spacing on the surrounding layout or via className:

<Separator className="my-3" />

API

All standard <div> attributes pass through.

Guidelines

Do

• Use a separator when content groups belong to the same surface but need a visual rest between them
• Keep the separator flush with the content it divides, and let surrounding padding do the spacing
• Pair vertical separators with a fixed-height row so they have something to stretch against

Don't

• Don't use a separator inside a card that already has a border around it. Pick one boundary
• Don't stack separators around every list row, since the repetition reads as noise
• Don't use a separator where a heading or label would communicate the boundary better