Divisor

Línea divisoria que separa contenidos.

Uso básico

Uso básico

El agua primaveral más verde que el cielo, una barca pintada dormida bajo la lluvia.

Junto al hogar, bella como la luna, muñecas blancas como escarcha y nieve.

Grupo alineado a la izquierda

Grupo alineado a la derecha

Vertical

Divisor

Arriba

Tinta china

Abajo

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

export default function Demo() {
  return (
    <>
      <span>Las aguas de primavera, más verdes que el cielo; en el barco pintado, se duerme al son de la lluvia.</span>
      <LhDivider />
      <span>Junto al mostrador, alguien como la luna; en sus muñecas blancas se cuaja la nieve.</span>
      <LhDivider dashed />
      <LhDivider labelPosition="left">Grupo alineado a la izquierda</LhDivider>
    </>
  )
}

Divider Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
direction	Dirección	'horizontal' | 'vertical'	—	'horizontal'
dashed	Estilo de línea discontinua	boolean	—	false
labelPosition	Posición del texto (actúa en dirección horizontal; en vertical siempre centrado)	'left' | 'center' | 'right'	—	'center'
borderStyle	Estilo del borde (si se indica, prevalece sobre dashed)	string	'solid' | 'dashed' | 'dotted' etc.	—
sx	Props rápidas de layout	SxProps	—	—

Accesibilidad

El divisor con texto se renderiza como role="separator" (semántica real de separación); los puramente decorativos se renderizan como role="presentation" y se sacan del árbol de accesibilidad. Solo cuando «lleva texto y es vertical» se emite aria-orientation="vertical".

Comportamiento conocido

borderStyle="dotted" genera el modificador lh-divider--dotted, pero la capa de estilos actualmente solo implementa --dashed, por lo que retrocede a línea continua; es el mismo comportamiento que en lh-ui-plus.

Estilos

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