Separator

A thin rule that divides related groups of content — list sections, toolbar clusters, inline metadata. Built on Base UI Separator, so it carries the correct separator role and orientation for assistive tech.

Import

import { Separator } from "@photon-ai/pho-ui/components/separator";

Horizontal

The default. Spans the full width of its container.

<Separator className="my-4" />

Vertical

Set orientation="vertical" inside a flex row. The parent must give the row a height — the separator stretches to fill it.

<div className="flex h-5 items-center gap-3">
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>Pricing</span>
</div>

Props

• orientation — horizontal · vertical (default horizontal)
• className — extend or override the rule (commonly margins)
• render — Base UI render prop to swap the underlying element while keeping the separator semantics

Accessibility

• Renders a <div> with role="separator" and aria-orientation set to match orientation, so assistive tech announces the divide between groups rather than treating the two sides as one run of content.
• It is decorative structure, not a control: the separator is never focusable, never in the tab order, and has no keyboard interaction.
• The exposed data-orientation (horizontal / vertical) drives the styling hooks, so the visual rule and the announced orientation always agree.

Best practices

• Reach for a separator only when whitespace alone doesn’t make the grouping clear. Over-dividing a layout adds noise.
• A separator is decorative structure, not a heading — don’t use it to imply a section title. Use a real heading for that.
• For a vertical separator, ensure the parent establishes a height; otherwise it collapses to zero.