Separator

A line that divides content, and — unless you opt out — tells a screen reader that it does. It runs either way: horizontal across stacked content, vertical down a row.

Import

import { Separator } from "@forte-ui/react";

Examples

Vertical

Set orientation="vertical" and the rule turns, along with the aria-orientation it reports.

A vertical separator is an empty box, so it has no length of its own. Inside a flex row it stretches to the tallest sibling; anywhere else — in ordinary flow, or between inline items like the metadata below — it falls back to one line's height. That floor is --forte-separator-min-length, and it is the only reason a vertical rule is ever visible outside a flex container.

In a toolbar the stretch is the point: the rule matches whatever it sits between, without anyone measuring the buttons.

Line style

variant is the whole visual API — a rule has exactly one dimension. solid reads as a structural division; dashed and dotted read as provisional ones, which is what you want for a drop zone's edge or an optional section.

Spacing and inset

Two knobs place the rule, and they are named after the axes rather than after margin because which physical side each one touches flips with the orientation:

• --forte-separator-spacing runs along the axis being separated — the gap between the rule and the content on either side of it.
• --forte-separator-inset runs across it — how far the rule is pulled in from the container's edges. Negative values push it back out, which is how a rule inside a padded panel becomes full-bleed.

Both default to 0, because the common case is a flex or grid parent whose gap already does the spacing and a built-in margin would double it.

In prose

Separator renders a <div>. Where the division is a genuine thematic break in running text, swap the element for the one HTML already has:

<Separator render={<hr />} />

The styles follow. The UA gives <hr> an inset 3D border and a 0.5em auto margin; both are cleared before this component paints its own single edge, so an <hr> and a <div> separator are pixel-identical.

Accessibility

Base UI renders role="separator" with an aria-orientation matching the prop, so the division is announced rather than merely drawn.

That is right when the rule is the grouping. It is noise when the grouping is already carried by a heading, a landmark or a list and the rule only reinforces it visually — a screen reader then reads the page's decoration out loud. Pass decorative for that case:

<Separator decorative />

Theming

The line is painted with a border, never background-color. Under forced-colors a background is replaced with a system colour — for a plain box that is Canvas, the page's own backdrop — so a hairline drawn that way disappears for exactly the users who most need the grouping cue. Border colours are forced to CanvasText instead, so the rule survives with no forced-colors rule in the stylesheet at all.

Nothing here transitions. A separator has no states, so there is nothing to animate, and a colour transition would only make it lag behind the rest of the page on a theme switch.

State is on data-orientation and data-variant, so a consumer can reach both from plain CSS or a Tailwind arbitrary variant (data-[orientation=vertical]:...) without wrapping the component.

API reference