K
KoreUI

Empty State

UI

Indicador visual para secciones vacías con soporte para iconos, imágenes y acciones.

Uso básico

Sin resultados

Intenta ajustar tu búsqueda o filtro.

<x-kore::empty-state
    title="Sin resultados"
    description="Intenta ajustar tu búsqueda o filtro." />
<x-kore::empty-state
    title="Sin resultados"
    description="Intenta ajustar tu búsqueda o filtro." />

Con icono

Muestra un icono Lucide en un círculo muted sobre el título.

Tu bandeja está vacía

Los nuevos mensajes aparecerán aquí.

<x-kore::empty-state
    icon="inbox"
    title="Tu bandeja está vacía"
    description="Los nuevos mensajes aparecerán aquí." />
<x-kore::empty-state
    icon="inbox"
    title="Tu bandeja está vacía"
    description="Los nuevos mensajes aparecerán aquí." />

Con acción

Usa el slot action para agregar botones de acción debajo de la descripción.

Sin documentos

Comienza creando un nuevo documento.

<x-kore::empty-state
    icon="file-plus"
    title="Sin documentos"
    description="Comienza creando un nuevo documento.">
    <x-slot:action>
        <x-kore::button icon="plus" label="Crear documento" />
    </x-slot:action>
</x-kore::empty-state>
<x-kore::empty-state
    icon="file-plus"
    title="Sin documentos"
    description="Comienza creando un nuevo documento.">
    <x-slot:action>
        <x-kore::button icon="plus" label="Crear documento" />
    </x-slot:action>
</x-kore::empty-state>

Props

Prop Tipo Default Descripción
title string|null null Título principal
description string|null null Texto descriptivo
icon string|null null Icono Lucide (se muestra en círculo muted)
image string|null null URL de imagen (alternativa al icono)