Separator

Installation

npm install @morphos/layout

pnpm add @morphos/layout

yarn add @morphos/layout

bun add @morphos/layout

Import

import { Separator } from '@morphos/layout'

Usage

Separator has no compound parts and no root state instance — use it directly.

Semantic separator

@Component()
class MyComponent extends StatefulComponent {
  render() {
    return (
      <div>
        <p>Section A</p>
        <Separator orientation="horizontal" />
        <p>Section B</p>
      </div>
    )
  }
}

Decorative separator

@Component()
class MyComponent extends StatefulComponent {
  render() {
    return (
      <div class="toolbar">
        <button>Bold</button>
        <Separator orientation="vertical" decorative />
        <button>Italic</button>
      </div>
    )
  }
}

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Direction of the separator
`decorative`	`boolean`	`false`	When true, hides the separator from assistive technology (`aria-hidden="true"`, no `role`)
`class`	`string`	—	CSS class
`id`	`string`	—	HTML id

`data-*` attributes

Attribute	Element	When present
`data-orientation`	Separator	Always — reflects the `orientation` prop

Accessibility

`decorative`	Rendered attributes
`false` (default)	`role="separator"` and `aria-orientation`
`true`	`aria-hidden="true"` only — no `role`

Use decorative={true} for purely visual dividers where the separation is already communicated by the surrounding content structure. Use the semantic (default) form when the separator conveys a meaningful boundary between distinct regions.

Styling example

.morphos-separator[data-orientation="horizontal"] {
  width: 100%;
  height: 1px;
}

.morphos-separator[data-orientation="vertical"] {
  width: 1px;
  align-self: stretch;
}

Interactive example