Propel

Separator

A thin rule that visually divides content along a horizontal or vertical axis.

Basic

Show code
import { Separator } from "@makeplane/propel/components/separator";

export default function BasicDemo() {
  return <Separator orientation="horizontal" decorative={false} />;
}

Vertical

Set orientation="vertical" to divide inline content; Base UI reflects the axis as aria-orientation.

OverviewMembersSettings
Show code
import { Separator } from "@makeplane/propel/components/separator";

export default function VerticalDemo() {
  return (
    <div className="flex h-6 items-center gap-3 text-body-sm-regular text-secondary">
      Overview
      <Separator orientation="vertical" decorative={false} />
      Members
      <Separator orientation="vertical" decorative={false} />
      Settings
    </div>
  );
}

Decorative

A decorative separator is visual-only and hidden from assistive technology — use it for layout rhythm, not a meaningful content boundary.

Draft the Q3 roadmapReview workspace members
Show code
import { Separator } from "@makeplane/propel/components/separator";

export default function DecorativeDemo() {
  return (
    <div className="flex w-72 flex-col gap-3 text-body-sm-regular text-secondary">
      Draft the Q3 roadmap
      <Separator orientation="horizontal" decorative />
      Review workspace members
    </div>
  );
}

Installation

import { Separator } from "@makeplane/propel/components/separator";

Props

Separator

PropTypeRequiredDescription
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>NoAllows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
orientation"horizontal" | "vertical"YesThe axis the rule runs along — one of the spec's adjustable ("depends") axes, so it is required rather than silently defaulting. `"horizontal"` is a full-width rule between stacked content; `"vertical"` is a full-height rule between inline content. Base UI reflects it as `[data-orientation]` (the single source of truth the cva keys off) and sets `aria-orientation`.
decorativebooleanYesWhether the separator is purely decorative (visually present but hidden from assistive technology). The spec's adjustable "Role" axis, so it is required — make a conscious choice rather than relying on a silent default. Pass `true` for visual-only dividers; pass `false` for separators that mark a meaningful content boundary and should be announced to screen readers. Base UI sets `role="separator"` and `aria-orientation`; `decorative` overrides both.