Separator
A one-pixel rule between groups of content. Built on Base UI's Separator, so it is announced or ignored correctly rather than being a styled div.
Notification settings
Choose what reaches your inbox.
Import
import { Separator } from "@mikenotthepope/substrateui"Separator or Divider
Both draw a rule. Separator is the primitive: one pixel, no spacing of its own, no text. Divideris the same rule plus a margin and an optional centred label, for the "or continue with" seam in a sign-in form.
If you are passing children or reaching for a label, you want Divider. If you want a hairline exactly where you put it and nothing else, this is the one.
Vertical rules need a height
A vertical separator is h-full w-px, so it takes its length from its parent. In a flex row of text that works out on its own; in a container with no resolved height it collapses to nothing. Give it an explicit height, or a parent that has one.
Accessibility
Base UI renders the element with role="separator" and an aria-orientation matching the prop, so a screen-reader user is told the groups are divided rather than being left to infer it from the visual gap.
Where the rule is pure decoration beside a heading that already establishes the break, pass role="none"so it isn't announced twice.
The rule uses bg-border, which is a non-text colour and so is not held to the 4.5:1 text ratio. Do not use it as the only cue for a meaningful boundary — pair it with spacing or a heading.
API Reference
Every other prop, including className and ref, goes to Base UI's Separator. See the Base UI separator docs for that surface.
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | "horizontal" | Which way the rule runs. Vertical needs a height from its container — it is h-full, so a parent with no height renders nothing. |