Separator

Separator draws a thin divider line to visually split groups of content. It defaults to a full-width horizontal rule, and switches to a vertical line when you set orientation="vertical". It is decorative by default, so it stays out of the accessibility tree unless you mark it as semantic.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: separator.tsx

import { Separator } from "@beacon/design-system";

// Horizontal divider between blocks.
<Separator className="my-4" />

// Vertical divider inside a horizontal row of items.
<div className="flex h-5 items-center space-x-4 text-sm">
  <div>Blog</div>
  <Separator orientation="vertical" />
  <div>Docs</div>
  <Separator orientation="vertical" />
  <div>Source</div>
</div>;

Props

Prop	Type	Default	Description
orientation	"horizontal" | "vertical"	"horizontal"	Direction of the divider. Vertical needs a sized parent to be visible.
decorative	boolean	true	When true, the separator is purely visual and hidden from assistive tech. Set false when the divide carries meaning.
className	string	—	Extra classes; commonly used for spacing such as my-4.

All other props of the underlying Radix Separator.Root are forwarded.

When to use

• Splitting stacked sections of content within a card or panel.
• Dividing inline items such as links or metadata in a horizontal row.
• Visually grouping related controls without adding a heavier container.

Do not wrap content sections in a Separator to create a bordered box; use a Card for bounded surfaces instead.