Divider

A divider that separates content.

Basic usage

Basic usage

Spring water greener than the sky, a painted boat asleep in the rain.

By the hearth, fair as the moon, white wrists like congealed frost and snow.

Left-aligned group

Right-aligned group

Vertical

Divider

Top

Ink wash

Bottom

import { LhDivider } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <span>Spring water greener than the sky, a painted boat asleep in the rain.</span>
      <LhDivider />
      <span>By the hearth, fair as the moon, white wrists like congealed frost and snow.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">Left-aligned group</LhDivider>
    </>
  )
}

Divider Props

Prop	Description	Type	Options	Default
direction	Direction	'horizontal' | 'vertical'	—	'horizontal'
dashed	Dashed line	boolean	—	false
labelPosition	Label position (effective horizontally; always centered vertically)	'left' | 'center' | 'right'	—	'center'
borderStyle	Border style (takes precedence over dashed when set explicitly)	string	'solid' | 'dashed' | 'dotted' …	—
sx	Layout shorthand	SxProps	—	—

Accessibility

A divider with a label renders as role="separator" (real grouping semantics); a purely decorative one renders as role="presentation" and is removed from the accessibility tree. aria-orientation="vertical" is output only when the divider has a label and is vertical.

Known behavior

borderStyle="dotted" outputs the lh-divider--dotted modifier, but the style layer currently only implements --dashed, so it falls back to a solid line — consistent with lh-ui-plus.

Styles

import '@lh-ui/react/style/divider'