# Separator

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

## Installation

```tsx
import { Separator } from "@makeplane/propel/components/separator";
```
## Usage

```tsx
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`.

```tsx
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.

```tsx
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.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `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. |
| `render` | `ReactElement<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. |