Result

Bloque de estado del resultado de una operación o de una página: éxito, error, aviso, o páginas 404/403/500. Cada estado trae icono y color automáticos.

Éxito con acción

El slot action centra los botones bajo el texto.

¡Pago recibido!

Te enviamos el recibo por correo.

<x-kore::result
    status="success"
    title="¡Pago recibido!"
    description="Te enviamos el recibo por correo."
>
    <x-slot:action>
        <x-kore::button label="Ir al inicio" />
        <x-kore::button label="Ver recibo" variant="outline" />
    </x-slot:action>
</x-kore::result>

<x-kore::result
    status="success"
    title="¡Pago recibido!"
    description="Te enviamos el recibo por correo."
>
    <x-slot:action>
        <x-kore::button label="Ir al inicio" />
        <x-kore::button label="Ver recibo" variant="outline" />
    </x-slot:action>
</x-kore::result>

Estados

info, warning, error y success, cada uno con su icono y color.

Info

Estado informativo.

Aviso

Algo requiere tu atención.

Error

No se pudo completar la acción.

Éxito

Todo salió bien.

<x-kore::result status="info" title="Info" description="Estado informativo." />
<x-kore::result status="warning" title="Aviso" description="Algo requiere tu atención." />
<x-kore::result status="error" title="Error" description="No se pudo completar la acción." />
<x-kore::result status="success" title="Éxito" description="Todo salió bien." />

<x-kore::result status="info" title="Info" description="Estado informativo." />
<x-kore::result status="warning" title="Aviso" description="Algo requiere tu atención." />
<x-kore::result status="error" title="Error" description="No se pudo completar la acción." />
<x-kore::result status="success" title="Éxito" description="Todo salió bien." />

Páginas de error

404, 403 y 500 con iconos dedicados, listos para una página de error completa.

Página no encontrada

La página que buscas no existe o fue movida.

Volver

Sin permiso

No tienes acceso a este recurso.

Error del servidor

Ocurrió un error inesperado. Intenta de nuevo en unos minutos.

{{-- 404 --}}
<x-kore::result status="404" title="Página no encontrada"
    description="La página que buscas no existe o fue movida.">
    <x-slot:action>
        <x-kore::button label="Volver" variant="outline" href="/" />
    </x-slot:action>
</x-kore::result>

{{-- 403 --}}
<x-kore::result status="403" title="Sin permiso"
    description="No tienes acceso a este recurso." />

{{-- 500 --}}
<x-kore::result status="500" title="Error del servidor"
    description="Ocurrió un error inesperado. Intenta de nuevo en unos minutos." />

{{-- 404 --}}
<x-kore::result status="404" title="Página no encontrada"
    description="La página que buscas no existe o fue movida.">
    <x-slot:action>
        <x-kore::button label="Volver" variant="outline" href="/" />
    </x-slot:action>
</x-kore::result>

{{-- 403 --}}
<x-kore::result status="403" title="Sin permiso"
    description="No tienes acceso a este recurso." />

{{-- 500 --}}
<x-kore::result status="500" title="Error del servidor"
    description="Ocurrió un error inesperado. Intenta de nuevo en unos minutos." />

Cuándo usarlo

La diferencia con empty-state, en una frase: desenlace de una acción, no ausencia de datos.

Result comunica el desenlace de una operación (un pago, un envío, un guardado) o el estado completo de una ruta (404, 403, 500). Suele ocupar toda la vista o el centro de un modal, y casi siempre trae una acción para seguir adelante: volver, reintentar, ir al inicio.

Empty-state, en cambio, representa «sin datos» dentro de una sección que sigue funcionando: una lista vacía, una búsqueda sin resultados, una bandeja sin mensajes. El resto de la página sigue interactiva a su alrededor. Si lo que quieres decir es «esto salió bien» o «esto salió mal», usa Result; si es «aquí todavía no hay nada que mostrar», usa empty-state.

Slots

Slot	Descripción
`action`	Botones de acción (centrados bajo el texto)
default	Contenido extra entre la descripción y las acciones

Iconos y colores por estado

status	Icono	Color
`success`	circle-check	success
`info`	info	info
`warning`	triangle-alert	warning
`error`	circle-x	destructive
`404`	search-x	muted
`403`	lock	warning
`500`	server-crash	destructive

Pasa icon para sobrescribir el icono del estado sin cambiar su color.

Props

Prop	Tipo	Default	Descripción
`status`	string	info	success, info, warning, error, 404, 403, 500
`title`	string\|null	null	Título principal
`description`	string\|null	null	Texto secundario
`icon`	string\|null	null	Icono Lucide para sobrescribir el del estado

En esta página

Éxito con acción Estados Páginas de error Cuándo usarlo Slots Iconos y colores por estado Props