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
• Proper semantic HTML and ARIA roles
• Can be marked as decorative to remove separator semantics
• Design token integration for consistent theming
• SSR compatible

Accessibility: built in

• 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
• The host itself carries no role (it is presentational), so the tree holds one separator: a role="separator" written on the host is replaced, never nested around the inner one

Accessibility: your part

• Set decorative when the line is only ornament. Without it, screen readers announce a separator.

When to Use:

• Between groups inside a component: a menu, a toolbar, a list
• In flex/grid layouts as column separators (vertical) — a vertical divider stretches to the height of the flex row it sits in (it sets no height of its own, so align-self: stretch applies); outside a flex row it is 1em tall, and a block-size on the host sets any other length
• The space around it is its container's: hy-toolbar spaces its dividers, and a page spaces its own content

When to use

• A line inside a component's content where spacing alone does not separate the parts: a menu's groups, a toolbar's groups.

Do

• Use it only where spacing cannot do the job.

When not to use

• A line between regions of a page (sections, a header's bottom edge, rows you draw yourself): the page's own rule, a border in --hy-page-rule-color at --hy-page-rule-width.

Examples

Basic horizontal divider

<hy-divider></hy-divider>

Vertical divider in a flex container

<style>
  .item-row {
    display: flex;
    align-items: center;
    gap: var(--hy-page-inline-sm);
  }
</style>
<div class="item-row">
  <span>Item 1</span>
  <hy-divider orientation="vertical"></hy-divider>
  <span>Item 2</span>
</div>

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.
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.

CSS Custom Properties

The documented hooks. Every override hook the component reads — one per token it paints — is listed in @whitespaceux/harmony/theme-api.json, and @whitespaceux/harmony/component-bindings.json (the Harmony MCP get-bindings tool) says which part and state each one paints.

Property	Default	Description
--hy-divider-border-tinted-rest	—	Line color in emphasis="tinted" (the subtle border mixed half-way to transparent)