Skip to main content

Separator

Visual divider between content sections.

Usage​

<w-separator></w-separator>

Props​

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Separator direction
decorativebooleantrueWhether purely decorative

Examples​

Horizontal (default)​

<p>Content above</p>
<w-separator></w-separator>
<p>Content below</p>

Vertical​

<div style="display: flex; align-items: center; gap: 16px;">
  <span>Left</span>
  <w-separator orientation="vertical"></w-separator>
  <span>Right</span>
</div>

Semantic Separator​

<w-separator decorative="false"></w-separator>

Styling​

The library handles size and orientation — 1px × 100% for horizontal, 1px × 100% for vertical with align-self: stretch. You only style appearance.

w-separator {
  background: #e0e0e0;
  opacity: 1;
}
/* Adjust thickness */
w-separator[orientation="horizontal"] {
  height: 2px;
}
w-separator[orientation="vertical"] {
  width: 2px;
}
SelectorTargets
w-separator[orientation="horizontal"]Horizontal separator
w-separator[orientation="vertical"]Vertical separator
w-separator[decorative]Non-semantic dividers

Accessibility​

  • role="separator" when not decorative
  • role="none" when decorative (default)
  • aria-orientation for direction