LayoutReact

Separator

A separator element accessible to screen readers: a line between groups of content that is also announced as a break.

Rendered by React 19.3.1

import { Separator } from '@hamur/react/separator'

export default function SeparatorExample() {
  return (
    <div className="stack">
      <div>
        <strong>Base UI</strong>
        <p className="muted">An unstyled component library.</p>
      </div>
      <Separator className="separator" />
      <div className="row separated">
        <span>Docs</span>
        <Separator className="separator" orientation="vertical" />
        <span>Components</span>
        <Separator className="separator" orientation="vertical" />
        <span>Releases</span>
      </div>
    </div>
  )
}

32Tests passing in React · 0 failing

2.3 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 10 upstream authors6 commits · last Nov 3

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Separator />

Examples

The demo at the top is the one example this component has so far.

API reference

1 props across 1 parts, in React syntax. className, style, render are listed once, under Shared props.

Separator`Separator`

A separator element accessible to screen readers. Renders a <div>.

Separator props
Prop	Type	Default
`orientation`The orientation of the separator.	`Orientation`	`'horizontal'`

Separator data attributes
Data attribute	Description
`data-orientation`	Indicates the orientation of the separator.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Separator takes no focus and has no keys.

Accessibility

What the parts set
Part	Sets	So that
Separator	`role="separator"`	a screen reader announces the break between groups
Separator	`aria-orientation` from `orientation`	the break is read as horizontal or vertical

Focus order

Separator is not focusable; focus passes over it.