'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Datos
Descriptions y Statistic
Pares de clave y valor, y números grandes con su cambio.
import { Descriptions, Statistic } from '@alea/ui';
Ejemplos
Descriptions
Pares de clave y valor en columnas.
- Plan
- Alea Pro yearly
- Status
- Active
- Renews
- October 17, 2027
- Seats
- 3 of 5
- License key
FL-8K2D-Q9XA-77PL
Statistic
Números grandes con su variación, que cuentan hacia arriba al aparecer.
Título, spans, tamaños y etiquetas en línea
title y extra ponen un título con una acción sobre la lista; columns llega hasta 4 (dos por debajo de 1024 px, una en teléfonos); span ensancha un elemento; size="sm" para paneles laterales; layout="inline" con labelWidth alinea las etiquetas en una columna.
Order #4821
- Customer
- Ana Rivas
- Status
- Packing
- Placed
- Oct 16, 2026
- Total
- $184.00
- Ship to
- Av. Francisco de Miranda, Torre Europa, piso 8, Caracas 1060
- Carrier
- MRW, express
- Tracking
MRW-55120-VE
- Owner
- Bruno Díaz
- Created
- Sep 2, 2026
- Visibility
- Team
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Bordered
bordered - Layout
layout - Size
size
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-5…--alea-space-6…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-size-base…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Component
--alea-desc-cols…--alea-desc-label…
Props
Descriptions props
Pares de clave y valor: detalles de un pedido, datos de un perfil, resúmenes de ajustes. Un título con una acción, de una a cuatro columnas, spans por elemento, apilado o en línea, dos tamaños.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
itemsobligatoria | { label: ReactNode; value: ReactNode; span?: 2 | 3 | 4 | 1 | undefined; wide?: boolean | undefined; }[] | - | Los pares: label y value. span define cuántas columnas ocupa un elemento; wide ocupa toda la fila. |
bordered | boolean | - | Dibuja líneas entre los elementos. |
columns | 2 | 3 | 4 | 1 | 2 | Columnas en pantallas anchas: de 1 a 4. Por defecto 2. Tres y cuatro columnas bajan a dos por debajo de 1024 px; todo es una columna en teléfonos. |
extra | ReactNode | - | Algo al final de la fila del título: un botón o enlace de Editar. |
labelWidth | string | - | Con layout inline: el ancho de la columna de etiquetas, cualquier medida CSS. Por defecto 40%. |
layout | "inline" | "stacked" | 'stacked' | stacked (la etiqueta sobre el valor, por defecto) o inline (etiqueta y valor lado a lado). |
size | "sm" | "md" | - | sm (más compacto, valores de 13 px) o md (por defecto). |
title | ReactNode | - | Un título sobre la lista (un h3). |
Statistic props
Un número grande con su etiqueta y su variación.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | ReactNode | - | Qué es el número. |
valueobligatoria | number | - | El número. |
animate | boolean | - | Cuenta desde 0 cuando aparece (se omite con movimiento reducido). |
delta | number | - | Variación contra el período anterior, por ejemplo 0.12 para +12%. |
formatOptions | NumberFormatOptions | - | Formato de número Intl (moneda, porcentaje, compacto). |
higherIsBetter | boolean | true | ¿Subir es bueno? Por defecto true (se pone verde); false invierte los colores (costos, errores). |
prefix | ReactNode | - | Antes del número, por ejemplo "quot;. |
suffix | ReactNode | - | Después del número, por ejemplo " ms". |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Descriptions
- Variantes
layoutinlinestackedsizesmmd- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-descriptions.alea-desc-item.alea-descriptions-wrap.alea-descriptions-head.alea-descriptions-title.alea-descriptions-extra- Atributos data
data-columns=1data-columns=3data-columns=4data-spandata-span=2data-span=3data-span=4data-size=smdata-bordereddata-widedata-layout=inline
Statistic
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-stat.alea-stat-label.alea-stat-value.alea-stat-delta- Atributos data
data-gooddata-bad
Accesibilidad
- Descriptions es una lista de definiciones.
- Statistic dice el cambio en palabras (sube o baja respecto de antes), no solo con color.
Qué hacer y qué evitar
Hacer
- Úsalo para detalles de solo lectura: un pedido, un perfil.
- Pon primero lo más importante.
Evitar
- No lo uses para datos editables: usa un Form.
- No pongas párrafos largos en un valor: usa toda la fila con wide.