◇

Separator

1 parts

A thin visual divider that separates and gives meaning to groups of content, such as items in a menu, sections of a toolbar, or rows in a list. Renders horizontally or vertically and, unless marked decorative, exposes role="separator" with the matching aria-orientation to assistive technology. Use it to break up related content into distinct regions. For slot-merging composition (rendering onto a consumer-provided element instead of an extra wrapper) pass as="template" — the underlying Primitive merges its props/ref onto the single child of the default slot.

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  Separator,
} from '@robonen/primitives/display/separator';

<Separator />

API Reference

Separator

Root

A thin visual divider that separates and gives meaning to groups of content, such as items in a menu, sections of a toolbar, or rows in a list. Renders horizontally or vertically and, unless marked `decorative`, exposes `role="separator"` with the matching `aria-orientation` to assistive technology. Use it to break up related content into distinct regions. For slot-merging composition (rendering onto a consumer-provided element instead of an extra wrapper) pass `as="template"` — the underlying `Primitive` merges its props/ref onto the single child of the default slot.

Prop	Type	Default	Description
`orientation`?	`SeparatorOrientation`	`'horizontal'`	The orientation of the separator. Any value other than `'vertical'` is normalized to `'horizontal'`, so `data-orientation` is always a valid token even when an unexpected value is supplied.
`decorative`?	`boolean`	`false`	When `true` the separator is purely decorative and is hidden from assistive technology (no role, `aria-hidden`). Otherwise it exposes `role="separator"` and the correct `aria-orientation`.