Layout

Separator

A visual or semantic dividing rule.

Server-renderable1 export

Decorative by default. Screen readers already convey structure through headings and landmarks, so most rules are noise when announced — set `decorative={false}` only when the divide carries real meaning.

Import

import { Separator } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/separator.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Dividing content

Above the rule

Below the rule

<Stack gap={4}>
  <Text>Above</Text>
  <Separator />
  <Text>Below</Text>
</Stack>

Props

Separator props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	Axis the rule runs along.
decorative	`boolean`	`true`	When true the rule is removed from the accessibility tree.

Accessibility

Decorative separators render `role="none"` and are skipped by screen readers.
Semantic separators render `role="separator"`, with `aria-orientation` set when vertical.