K
KoreUI

Descriptions

UI

Vista de detalle de solo lectura para mostrar pares etiqueta/valor de un registro: páginas «ver», perfiles y resúmenes.

Uso básico

Subcomponentes: la API principal, para valores con formato rico usando otros componentes.

Usuario

Nombre
Oscar Villa
Email
oscar@mail.com
Estado
Activo 
<x-kore::descriptions title="Usuario" :columns="2">
    <x-kore::descriptions.item label="Nombre" value="Oscar Villa" />
    <x-kore::descriptions.item label="Email" value="oscar@mail.com" />
    <x-kore::descriptions.item label="Estado">
        <x-kore::badge label="Activo" color="success" />
    </x-kore::descriptions.item>
</x-kore::descriptions>
<x-kore::descriptions title="Usuario" :columns="2">
    <x-kore::descriptions.item label="Nombre" value="Oscar Villa" />
    <x-kore::descriptions.item label="Email" value="oscar@mail.com" />
    <x-kore::descriptions.item label="Estado">
        <x-kore::badge label="Activo" color="success" />
    </x-kore::descriptions.item>
</x-kore::descriptions>

Valores con formato

El slot del item admite cualquier componente: ideal para estados, verificaciones o avatares.

Estado
Activo
Verificado 
<x-kore::descriptions :columns="2">
    <x-kore::descriptions.item label="Estado">
        <x-kore::badge label="Activo" color="success" />
    </x-kore::descriptions.item>
    <x-kore::descriptions.item label="Verificado">
        <x-kore::boolean :value="true" />
    </x-kore::descriptions.item>
</x-kore::descriptions>
<x-kore::descriptions :columns="2">
    <x-kore::descriptions.item label="Estado">
        <x-kore::badge label="Activo" color="success" />
    </x-kore::descriptions.item>
    <x-kore::descriptions.item label="Verificado">
        <x-kore::boolean :value="true" />
    </x-kore::descriptions.item>
</x-kore::descriptions>

Layout vertical

Etiqueta encima del valor, útil en columnas estrechas.

Plan
Pro
Ciclo
Anual
Renovación
15 jul 2026 
<x-kore::descriptions layout="vertical" :columns="3">
    <x-kore::descriptions.item label="Plan" value="Pro" icon="badge-check" />
    <x-kore::descriptions.item label="Ciclo" value="Anual" icon="repeat" />
    <x-kore::descriptions.item label="Renovación" value="15 jul 2026" icon="calendar" />
</x-kore::descriptions>
<x-kore::descriptions layout="vertical" :columns="3">
    <x-kore::descriptions.item label="Plan" value="Pro" icon="badge-check" />
    <x-kore::descriptions.item label="Ciclo" value="Anual" icon="repeat" />
    <x-kore::descriptions.item label="Renovación" value="15 jul 2026" icon="calendar" />
</x-kore::descriptions>

Bordered

Rejilla con celdas y bordes tipo tarjeta.

Factura

Folio
A-1024
Fecha
15 jul 2026
Cliente
Acme S.A.
Total
$ 12,400.00
Notas
Entrega en almacén central. 
<x-kore::descriptions title="Factura" :columns="2" bordered>
    <x-kore::descriptions.item label="Folio" value="A-1024" />
    <x-kore::descriptions.item label="Fecha" value="15 jul 2026" />
    <x-kore::descriptions.item label="Cliente" value="Acme S.A." />
    <x-kore::descriptions.item label="Total" value="$ 12,400.00" />
    <x-kore::descriptions.item label="Notas" :span="2" value="Entrega en almacén central." />
</x-kore::descriptions>
<x-kore::descriptions title="Factura" :columns="2" bordered>
    <x-kore::descriptions.item label="Folio" value="A-1024" />
    <x-kore::descriptions.item label="Fecha" value="15 jul 2026" />
    <x-kore::descriptions.item label="Cliente" value="Acme S.A." />
    <x-kore::descriptions.item label="Total" value="$ 12,400.00" />
    <x-kore::descriptions.item label="Notas" :span="2" value="Entrega en almacén central." />
</x-kore::descriptions>

Data-driven

Atajo con un array para datos simples. Cada entrada acepta label, value, icon, span y html.

Nombre
Oscar Villa
Email
oscar@mail.com
Rol
Administrador
Alta
15 jul 2026 
<x-kore::descriptions :columns="2" :items="[
    ['label' => 'Nombre', 'value' => 'Oscar Villa'],
    ['label' => 'Email', 'value' => 'oscar@mail.com'],
]" />
<x-kore::descriptions :columns="2" :items="[
    ['label' => 'Nombre', 'value' => 'Oscar Villa'],
    ['label' => 'Email', 'value' => 'oscar@mail.com'],
]" />

Cuándo usarlo

Antes de armar a mano un bloque de labels y valores para una vista de detalle.

Descriptions es el espejo de solo lectura del formulario: el mismo modelo mental de «etiqueta + valor», pero sin inputs, sin wire:model y sin validación. Úsalo en páginas «ver», perfiles y resúmenes, donde el usuario consulta datos en vez de editarlos.

Es el compañero natural del DataTable: la tabla lista muchos registros, Descriptions muestra el detalle de uno solo. Un patrón habitual es una fila de tabla que navega a una página con un Descriptions.

Los items heredan layout, bordered y size del contenedor vía @aware, así que no hace falta repetirlos en cada descriptions.item.

Props del contenedor

Prop Tipo Default Descripción
title string|null null Encabezado opcional
description string|null null Subtítulo opcional
columns int 1 Columnas de la rejilla (1, 2, 3) — responsive desde sm
layout string horizontal horizontal (label al lado) o vertical (label encima)
bordered bool false Rejilla con celdas y bordes tipo tarjeta
size string md Densidad: sm, md, lg
items array|null null Atajo data-driven; si se usa, ignora el slot

Props de item

Prop Tipo Default Descripción
label string vacío Etiqueta del campo
value string|null null Valor simple; si es null se usa el slot (para badge, boolean, etc.)
icon string|null null Icono Lucide junto a la etiqueta
span int 1 Columnas que ocupa la entrada
Cargando