Separator v0.1.0 Data display

Horizontal or vertical rule with proper separator semantics.

import { Separator } from "latticeui-react";

Examples

Horizontal and vertical

Above

Below

Docs

API

Blog

Show code

<p>Above</p>
<Separator />
<p>Below</p>

<div style={{ display: "flex" }}>
  <span>Docs</span>
  <Separator orientation="vertical" />
  <span>API</span>
</div>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`div`	`[data-scope="separator"][data-part="root"]`

Props

Prop	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`decorative`	`boolean`	`false`	Hides from assistive tech when purely visual.

Accessibility

Roles: separator

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="separator"][data-part="root"] {
  /* your overrides */
}

State attributes: data-orientation