Componentes

Todos los componentes de esta página son HeroUI reales y ejecutables —puedes interactuar con ellos— vestidos con los tokens de Legalty (acento violeta, radios rounded, tipografía). Son la fuente de verdad: lo que ves aquí es lo que se construye en producto.

Botones

Una sola acción primaria por vista. El resto, secundario, terciario o ghost. El destructivo solo confirma acciones irreversibles.

Secundario de peso — la superficie invertida

Hay acciones que no son la primaria de la vista pero tampoco son un enlace tímido: «Exportar», «Emitir recibo», «Crear usuario». Para ésas está la superficie invertida: fondo negro sobre claro, fondo blanco sobre oscuro, siempre con --lg-invert-text encima.

.boton-secundario-peso {
  background: var(--lg-invert-bg);
  color: var(--lg-invert-text);
  border-radius: var(--lg-radius-control);
}
.boton-secundario-peso:hover { background: var(--lg-invert-bg-hover); }

Es el mismo rol que pinta la entrada activa de la barra lateral, y está nombrado una sola vez para que no acaben siendo dos negros distintos.

Implementación — HeroUI v3: <Button variant="secondary"> vestido con los tokens de arriba. NextUI v2 (dashboard): className="bg-lg-invert text-lg-invert hover:bg-lg-invert-hover" sobre un <Button>, porque su variant no llega a este rol.

Campos de formulario

Etiqueta siempre visible, texto de ayuda debajo y estado de error explícito. El campo hereda el radio del sistema.

Controles de selección

Checkbox, switch y radios para decisiones binarias y de opción única.

Estados y badges

Chips para etiquetar estado de expedientes, documentos y firmas.

Alertas

Mensajes contextuales con color semántico. Título breve y descripción accionable.

Cards

Contenedor de información agrupada. Cabecera, cuerpo y pie con la acción de la tarjeta.

Tabs

Navegación entre vistas relacionadas dentro de un mismo contexto.

Tooltips

Información contextual breve, activada por hover o foco.

Modales / Diálogos

Interrupciones deliberadas para confirmar o completar una tarea sin perder el contexto.

Dropdowns

Menús de acciones secundarias sobre un elemento.

Select

Selección de una opción entre muchas, con búsqueda y teclado.

Tabla de datos

El caballo de batalla de los expedientes: densa, legible y ordenable.

Carga

Indicadores de progreso para operaciones asíncronas.