Divider

A separator line that visually divides content. With label text it carries grouping semantics (role="separator"); purely decorative variants are removed from the accessibility tree.

Basic Usage

Basic Usage

Content above

Content below

<script setup lang="ts">
</script>

<template>
  <LhDivider />
</template>

<script>
export default {}
</script>

<template>
  <LhDivider />
</template>

Vertical Divider

Vertical

Home

List

Detail

<script setup lang="ts">
</script>

<template>
  <!-- Vertical -->
  <div>
    <span>Home</span>
    <LhDivider direction="vertical" />
    <span>List</span>
    <LhDivider direction="vertical" />
    <span>Detail</span>
  </div>
</template>

<script>
export default {}
</script>

<template>
  <!-- Vertical -->
  <div>
    <span>Home</span>
    <LhDivider direction="vertical" />
    <span>List</span>
    <LhDivider direction="vertical" />
    <span>Detail</span>
  </div>
</template>

With Label

Labels work in both directions: align horizontally with label-position; vertical labels are always centred.

With Label

Listening to the rain in a tower in youth

Listening to the rain on a boat in middle age

Listening to the rain in a monk's hut now

<script setup lang="ts">
</script>

<template>
  <LhDivider label-position="left">Listening to the rain in a tower in youth</LhDivider>
  <LhDivider>Listening to the rain on a boat in middle age</LhDivider>
  <LhDivider label-position="right">Listening to the rain in a monk's hut now</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider label-position="left">Listening to the rain in a tower in youth</LhDivider>
  <LhDivider>Listening to the rain on a boat in middle age</LhDivider>
  <LhDivider label-position="right">Listening to the rain in a monk's hut now</LhDivider>
</template>

Dashed

Dashed

Dashed combines with labels

Custom border style (dotted)

<script setup lang="ts">
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Dashed combines with labels</LhDivider>
  <LhDivider border-style="dotted">Custom border style (dotted)</LhDivider>
</template>

<script>
export default {}
</script>

<template>
  <LhDivider dashed />
  <LhDivider dashed>Dashed combines with labels</LhDivider>
  <LhDivider border-style="dotted">Custom border style (dotted)</LhDivider>
</template>

API

Props

Prop	Description	Type	Default
direction	Divider direction	"horizontal" | "vertical"	'horizontal'
dashed	Dashed style	boolean	false
labelPosition	Label alignment (horizontal only; vertical labels are always centred)	"left" | "center" | "right"	'center'
borderStyle	Border style (e.g. 'dotted'), reserved	string	—
sx	Shorthand layout props (e.g. { mt: 2, w: '50%' }), applied as inline styles on the root element	LhSxProps	—

Slots

Slot	Description	Default
default	Divider label text (left/right when horizontal, above/below when vertical)	—

Accessibility

• With label: role="separator" — a real grouping boundary for screen readers; vertical dividers also declare aria-orientation="vertical"
• Decorative: role="presentation", removed from the accessibility tree
• Not focusable, no keyboard interaction

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/divider/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhDividerProps

export interface LhDividerProps {
  direction?: LhDividerDirection
  dashed?: boolean
  labelPosition?: LhDividerLabelPosition
  borderStyle?: string
  sx?: LhSxProps
}

LhDividerLabelPosition _{(from @lh-ui/share/core/divider)}

export type LhDividerLabelPosition = 'left' | 'center' | 'right'

LhDividerDirection _{(from @lh-ui/share/core/divider)}

export type LhDividerDirection = 'horizontal' | 'vertical'