HyDivider

Usage examples on this page are written for Lit / plain HTML (<hy-divider>). The same component ships as HyDivider in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

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>

API

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the divider.
spacing	spacing	'none' | 'small' | 'medium' | 'large'	'none'	The amount of spacing (margin) around the divider.
emphasis	emphasis	'solid' | 'tinted'	'solid'	Visual chrome weight on the divider line.
decorative	decorative	boolean	false	Whether the divider is purely decorative.

CSS Parts

Part	Description
base	The divider element (<hr> or <div>). Usage: Primary styling target for customizing the divider's appearance.