Componentes
HeroUI en la guía y contratos independientes del kit para todos los proyectos.
Los ejemplos de esta guía usan HeroUI v3. El contrato se puede adaptar a NextUI v2, HTML nativo u otro kit: conducta, roles y accesibilidad deben coincidir. No obliga a migrar el kit de las aplicaciones.
Botones
Una acción principal por región de decisión. Primario neutro, secundario con borde o superficie, terciario/ghost para menor prioridad. El índigo nunca rellena el CTA primario.
Todos cubren default, hover, pressed, foco, disabled y loading. Disabled usa roles propios; loading mantiene ancho, anuncia el estado y evita envíos duplicados. Una acción fallida conserva contexto y ofrece recuperación.
.boton-primario {
background: var(--lg-action-bg);
color: var(--lg-action-text);
min-height: var(--lg-button-height);
border-radius: var(--lg-radius-control);
padding-inline: var(--lg-button-padding-x);
font-family: var(--lg-font-sans);
}
El archivo opcional /components.css ofrece .lg-button, .lg-field, .lg-number, .lg-status y .lg-notice. Para HeroUI, el layout aplica el mismo emisor con selectores del kit. NextUI v2 requiere adaptar la geometría y mapear primary a action, no a accent.
Campos y selección
Etiqueta asociada, ayuda y error cercano. Checkbox, radio y switch conservan su affordance estándar; su estado puede usar índigo. Targets 44 px aunque el indicador visual sea menor.
Estados, avisos y paneles
Expediente verificado
Todos los documentos han sido validados correctamente.Falta información
Completa los datos de facturación para continuar.Acción rechazada
La firma no pudo verificarse. Intenta de nuevo.Datos de facturación
NIT, dirección fiscal y método de pago.
No usar un badge para información que es prosa. Un panel agrupa un propósito; evitar paneles dentro de paneles. Toast, banner y campo inválido tienen comportamientos distintos: Notificaciones.
Navegación y ayuda
Resumen general del expediente y su estado actual.
Tabs con etiquetas completas y selección legible. Tooltip complementa, nunca oculta información esencial. Menús conservan teclado y nombre accesible. No poner botones independientes dentro de otro botón o enlace.
Diálogos, tablas y carga
| Expediente | Estado | Fecha |
|---|---|---|
| Constitución S.A. | Activo | 12 May 2026 |
| Acta de asamblea | Pendiente | 03 Jun 2026 |
| Poder notarial | Firmado | 28 Jun 2026 |
Resolver primero en contexto; el diálogo se reserva a decisiones que requieren aislamiento. Gestionar foco inicial y de retorno, Escape y descripción. Cargas de datos usan skeleton o indicador con estado anunciado. No mostrar un cero mientras falta un dato.
Cards de navegación y portada
La portada de la guía usa .lg-card dentro de modo app: radio de panel 20 px, padding del contexto, título Inter de 20 px/1.4 y texto Inter de 14 px/1.6. Superficies elevadas neutras, borde discreto, hover con borde fuerte y foco índigo. Número de capítulo, título, explicación y apertura tienen roles distintos.
Una card navegable es un único enlace con nombre tomado del título. No contiene botones o enlaces anidados. La descripción conserva contraste y el texto no se condensa. El grid se apila antes de reducir el ancho útil por debajo de 280 px. La frase «Abrir capítulo» con flecha refuerza la interacción y no simula otro control.