componentes / divider

Divider

Separador horizontal o vertical, con texto opcional en el medio.

Cómo usar

Renderiza `role="separator"` con `aria-orientation`. Los lectores de pantalla lo anuncian, así que úsalo solo cuando la separación tenga significado; para decoración pura usa `decorative`. Un divisor vertical se estira a la altura de un padre flex.

preview

Divider.tsx

import { Divider } from "vaiperui";
 
<Divider />
<Divider label="or" variant="dashed" spacing="md" />
<Divider orientation="vertical" customColor="#7c3aed" />

Estilo de la línea

preview

solid

dashed

dotted

variant.tsx

<Divider variant="solid" />
<Divider variant="dashed" />
<Divider variant="dotted" />

Con texto

preview

start

center

end

label.tsx

<Divider label="start" labelAlign="start" />
<Divider label="center" />
<Divider label="end" labelAlign="end" />

Color

preview

soft

strong

customColor

color.tsx

<Divider color="soft" />
<Divider color="strong" />
<Divider customColor="#7c3aed" />

Vertical

preview

vertical

vertical.tsx

<div className="flex h-8 items-center gap-3">
  A <Divider orientation="vertical" /> B
</div>

Props

Prop	Valores	Predeterminado	Descripción
orientation	horizontal \| vertical	horizontal	Dirección de la línea
variant	solid \| dashed \| dotted	solid	Estilo de la línea
spacing	none \| sm \| md \| lg	none	Margen alrededor de la línea (8 / 16 / 24px)
color / customColor	default \| strong \| soft / CSS color \| { light, dark }	default	Token de borde del tema, o tu propio color (gana sobre `color`)
label / labelAlign	ReactNode / start \| center \| end	none / center	Texto dentro de la línea y dónde queda
decorative	boolean	false	Usa role="presentation" en lugar de separator

Accesibilidad

Sin `label` renderiza un `<hr>`; con `label`, un `<div>`. Ambos reciben `role="separator"` y `aria-orientation` igual a `orientation`.
`decorative` cambia el rol a `presentation` y quita `aria-orientation`, así que las tecnologías de asistencia lo ignoran.
El texto del label sigue siendo legible; las líneas a su lado son `aria-hidden`.
No es enfocable y no tiene comportamiento de teclado.

Ten en cuenta

Usa `decorative` cuando la línea sea solo visual, para que los lectores de pantalla no anuncien un separador entre cada elemento.
El color y `variant` son solo visuales: no dependas de ellos para transmitir significado.