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. Give it children and it splits around them, a label set into the line.

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.

With a label

Put children on the rule and the line splits around them — one half either side, the label between. or between two ways in is the canonical case:

It works vertically too. The label stays upright, with a half-line above and below it, and in a flex row the halves stretch to the taller sibling exactly as the plain rule does:

One difference from the plain rule: a labeled vertical one has no length floor. Outside a flex or grid row its halves have nothing to be, and only the label shows. That is deliberate — the floor the halves would need is two line boxes plus the label, and a flex row is sized from its items, so a toolbar-height row holding one would grow to fit it. Give it a row.

Text is the usual label, but anything renders — an icon, a Badge, a Kbd. The label is deliberately no louder than the rule it sits on: small, muted and medium weight, from --forte-separator-label-font-size, --forte-separator-label-color and --forte-separator-label-font-weight, with --forte-separator-label-gap between it and the line. A label on a divider is secondary text by definition; if yours needs to be a heading, it is a heading, and the rule should sit under it instead.

A labeled rule is named by its label — see Accessibility.

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.

Not with a label, though: <hr> is a void element and cannot hold one.

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 />

Labels

A labeled rule is named by its label: the root carries aria-labelledby pointing at it, so a screen reader announces "or, separator" rather than passing over the line. The attribute is doing real work: separator is a role whose children are presentational, so text left loose inside one is not guaranteed to be exposed at all. Your own aria-label or aria-labelledby wins if you pass one.

decorative still drops the role, and only the role. There is no name to give a role="none" element, so the label simply stays in the tree as plain text — right for a date between two runs of messages, which a screen reader should still hear. Where the label is visual rhetoric and nothing more — or between two buttons that already say what they do — hide the whole thing:

<Separator decorative aria-hidden>or</Separator>

Theming

The line is painted with a border, never background-color. Under forced-colors a background is replaced with a system color — 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 colors 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 color transition would only make it lag behind the rest of the page on a theme switch.

State is on data-orientation and data-variant, with data-labeled beside them when there is a label, so a consumer can reach all three from plain CSS or a Tailwind arbitrary variant (data-[orientation=vertical]:...) without wrapping the component. The label itself is data-forte="separator-label".

API reference

Everything else passes through to Base UI's Separator.