Separator
A thin rule that divides related groups of content. Use it between list items, sections of a settings panel, or alongside groups of inline controls — anywhere a hairline reads more cleanly than extra padding.
Examples
Horizontal
Vertical
In a menu row
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 — 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
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Axis the separator runs along. |
decorative | boolean | true | When true, hides the separator from assistive technology. |
className | string | — | Additional CSS classes — useful for color or size overrides. |
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 — 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 — the repetition reads as noise
- Don't use a separator where a heading or label would communicate the boundary better