HyDivider

A visual separator that divides content into distinct sections.

The divider component renders as a thin line that can be oriented horizontally or vertically. It supports proper semantic HTML (<hr> for horizontal, <div> with role="separator" for vertical) and accessibility attributes.

Key Features:

• Horizontal and vertical orientations
• Configurable spacing around the divider
• Proper semantic HTML and ARIA roles
• Can be marked as decorative to remove separator semantics
• Design token integration for consistent theming
• SSR compatible

Accessibility Highlights:

• Uses <hr> element for horizontal orientation (implicit separator role)
• Uses role="separator" for vertical orientation
• Sets aria-orientation attribute for vertical separators
• Uses role="presentation" for decorative dividers (removes separator semantics)
• High contrast mode and forced colors support

When to Use:

• Between sections of content in a page
• Between items in a list or menu
• To create visual hierarchy
• In flex/grid layouts as column separators (vertical)

Examples

Basic horizontal divider

<hy-divider></hy-divider>

Vertical divider in a flex container

<div style="display: flex; align-items: center; gap: 16px;">
  <span>Item 1</span>
  <hy-divider orientation="vertical"></hy-divider>
  <span>Item 2</span>
</div>

With spacing

<p>Content above</p>
<hy-divider spacing="large"></hy-divider>
<p>Content below</p>

Decorative divider (no separator semantics)

<hy-divider decorative></hy-divider>

Methods

render()

Main render method producing the divider element.

Uses <hr> for horizontal orientation (semantic separator element) and <div role="separator"> for vertical orientation (per WAI-ARIA spec).

When decorative, uses role="presentation" to remove separator semantics while keeping the element in the accessibility tree (better than aria-hidden for purely visual elements that don't need to be completely hidden).