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​

w-separator {
  background: #e0e0e0;
}

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

w-separator[orientation="vertical"] {
  width: 1px;
  height: 100%;
}

Accessibility​

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