K
KoreUI

Divider

UI

Separador horizontal o vertical con soporte para etiquetas, iconos y contenido personalizado.

Uso básico

<x-kore::divider />
<x-kore::divider label="O continúa con" />
<x-kore::divider icon="star" />
<x-kore::divider />
<x-kore::divider label="O continúa con" />
<x-kore::divider icon="star" />

Con etiqueta

Etiqueta con alineación: left, center (default), right.

<x-kore::divider label="Sección" align="left" />
<x-kore::divider label="Medio" align="center" />
<x-kore::divider label="Final" align="right" />
<x-kore::divider label="Sección" align="left" />
<x-kore::divider label="Medio" align="center" />
<x-kore::divider label="Final" align="right" />

Con icono

Icono Lucide centrado en el separador.

<x-kore::divider icon="arrow-down" />
<x-kore::divider icon="star" type="dashed" />
<x-kore::divider icon="arrow-down" />
<x-kore::divider icon="star" type="dashed" />

Contenido personalizado

Usa el slot default para contenido personalizado.

<x-kore::divider>
    <x-kore::badge label="Nuevo" color="success" />
</x-kore::divider>
<x-kore::divider>
    <x-kore::badge label="Nuevo" color="success" />
</x-kore::divider>

Tipos de línea

Tres estilos de línea: solid, dashed, dotted.

<x-kore::divider type="solid" />
<x-kore::divider type="dashed" label="Sección" />
<x-kore::divider type="dotted" />
<x-kore::divider type="solid" />
<x-kore::divider type="dashed" label="Sección" />
<x-kore::divider type="dotted" />

Vertical

Orientación vertical. No soporta slots ni label/icon.

Opción A Opción B 
<div class="flex items-center gap-4 h-20">
    <span>Opción A</span>
    <x-kore::divider orientation="vertical" />
    <span>Opción B</span>
</div>
<div class="flex items-center gap-4 h-20">
    <span>Opción A</span>
    <x-kore::divider orientation="vertical" />
    <span>Opción B</span>
</div>

Props

Prop Tipo Default Descripción
label string|null null Texto del separador
icon string|null null Icono Lucide
align string center Alineación del contenido: left, center, right
orientation string horizontal Orientación: horizontal, vertical
type string solid Estilo de línea: solid, dashed, dotted