Propel

Separator

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

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

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

Installation

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

Usage

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

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

Examples

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>
  );
}

API Reference

Separator

A thin rule that visually divides content. Grafts Base UI's `Separator` behavior onto the styled `elements` `Separator` `<div>` via `render`. Both adjustable axes from the design spec are required: `orientation` (`"horizontal"` | `"vertical"`) and `decorative` (the "Role" axis — semantic vs. visual-only). Spacing around the rule belongs to the surrounding layout, not the separator.

PropTypeDefaultDescription
orientation(required)"horizontal" | "vertical"—The 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`.
decorative(required)boolean—Whether 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.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>—Allows 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.