Separator

A thin dividing line — a native <hr>, decorative by default, because most dividers in a UI are visual rather than meaningful.

Source Storybook Accessibility

neelam-ui

An accessible React component library.

DocsSourceChangelog

Usage#

import { Separator } from "neelam-ui";
 
<Separator className="my-4" />
<Separator orientation="vertical" />

Decorative by default#

decorative defaults to true, which sets aria-hidden and keeps the separator out of the accessibility tree entirely.

That default is deliberate. Most separators divide things that are already visually related — two buttons in a toolbar, a card's header from its body — rather than marking a genuine thematic shift a screen reader user needs told about. It is the same bias BreadcrumbSeparator takes.

Pass decorative={false} when the line really does mark a break between sections:

<Separator decorative={false} />

A native <hr> already carries an implicit separator role, so a meaningful separator needs no ARIA beyond aria-orientation for the vertical case — the orientation <hr>'s role implies is horizontal. A decorative one is hidden outright rather than having its implicit role stripped.

Vertical separators#

orientation="vertical" uses self-stretch, not h-full, so it takes the height of its flex container.

A vertical separator needs a flex row

self-stretch only stretches inside a flex container. Outside one there is nothing to stretch to and the separator collapses to zero height — set one explicitly via className if you need it there.

The reason it is self-stretch rather than h-full is a real bug this library hit in Resizable: a percentage height cannot resolve against a container whose own height is intrinsic rather than explicit. self-stretch sidesteps percentage resolution entirely.

Keyboard#

Keyboard shortcuts
Key	Behaviour
`Tab`	Not focusable in either mode. A separator is never interactive — for a draggable divider, see Resizable.

Accessibility#

Renders a native <hr>, so a non-decorative separator gets its role from the platform.
Decorative separators are aria-hidden, so they add nothing to what a screen reader announces.
aria-orientation="vertical" is set only when the separator is both vertical and meaningful — on a hidden element it would be pointless.
The line is drawn with border-0 and a background colour, which gives the same 1px rule in both orientations without a border-side to switch.

Never carry meaning by the line alone

A separator is a visual grouping cue. In forced-colours mode, and for anyone not seeing the layout, the grouping has to also come from headings, landmarks, or list structure — a rule between two blocks conveys nothing on its own.

API reference#

Props for Separator
Prop	Type	Default
`decorative` Whether this is purely visual rather than a meaningful break between sections. Defaults to `true` — most separators in a UI divide visually related things (two buttons in a toolbar, a card's header from its body) rather than marking a genuine thematic shift a screen reader user needs announced, the same bias `BreadcrumbSeparator` and `CarouselDots` already take for their own purely-visual marks.	`boolean`	`true`
`orientation` `"horizontal"` (the default) or `"vertical"`.	`enum`	`horizontal`

Also accepts every native <hr> attribute.