hx components Separator

HxSeparator

Visual divider line. Renders <div>.

// Horizontal divider with vertical margin
<HxSeparator direction="dir-x" color="waive" marginY="md" />

// Vertical divider between inline elements
<HxFlex direction="dir-x" alignItems="center">
  <span>Left</span>
  <HxSeparator direction="dir-y" marginX="sm" />
  <span>Right</span>
</HxFlex>

Props

Prop	Type	Default	Description
direction	'dir-x' | 'dir-y'	'dir-x'	Orientation. 'dir-x' = horizontal, 'dir-y' = vertical
color	HxColor	—	Line color
size	size token	—	Line length (horizontal) or height (vertical). Thickness is fixed at 1px
marginX	size token	none	Horizontal margin
marginY	size token	none	Vertical margin
$model	HxObject<T>	—	Reactive model

Native DOM Events

All standard <div> events forwarded. As a visual divider, DOM event listeners are rarely needed in practice.

Global Config

import { configHxSeparator } from '@hx/components';
configHxSeparator({ color: 'waive' });