Componentes
Última actualización: 14 de noviembre de 2026.
Este catálogo define la apariencia, finalidad y comportamiento de los elementos compartidos de la aplicación. Las medidas y los estados deben conservar su significado en web y móvil, especialmente en controles pequeños y superficies táctiles.
1. Botones
Sección titulada «1. Botones»Variantes
Sección titulada «Variantes»| Variante | Apariencia | Uso |
|---|---|---|
| Principal | Azul oscuro con texto blanco. | Acción principal del bloque. |
| Contorno | Fondo de tarjeta y borde suave. | Acción secundaria. |
| Secundario | Fondo celeste suave y texto azul oscuro. | Alternativa de menor jerarquía. |
| Discreto | Sin relleno en reposo; fondo suave al interactuar. | Herramientas o acciones auxiliares. |
| Enlace | Texto con subrayado al interactuar. | Navegación o acción textual. |
| Volver | Azul oscuro atenuado, borde y flecha. | Regresar al paso o vista anterior. |
| Éxito | Verde con texto blanco. | Acción con significado positivo definido. |
| Destructivo | Rojo sobre fondo rojo suave. | Eliminación o acción destructiva. |
| Urgente | Rojo sólido con texto blanco. | Acción explícitamente urgente; no usar como decoración. |
Tamaños
Sección titulada «Tamaños»| Tamaño | Altura visual táctil | Escritorio con puntero preciso |
|---|---|---|
| Normal | 44 px | 36 px. |
| Pequeño | 40 px | 32 px. |
| Grande | 48 px | 40 px. |
| Extra pequeño | 24 px | 24 px. |
| Solo icono normal | 44 × 44 px | 36 × 36 px. |
Los tamaños visuales inferiores a 44 px deben disponer de un área efectiva de interacción de al menos 44 × 44 px en superficies táctiles. Mantener separación suficiente entre acciones para evitar activaciones accidentales.
Los botones utilizan texto de 14 px con peso 600, radio de 12 px e icono opcional de 16 px. En variantes grandes se admite texto de 16 px. Separar icono y etiqueta entre 6 y 8 px; conservar etiquetas completas y adaptar la distribución cuando no quepan.
Estados
Sección titulada «Estados»| Estado | Tratamiento |
|---|---|
| Reposo | Variante y etiqueta reconocibles. |
| Hover | Cambio suave de relleno o borde cuando hay puntero. |
| Foco | Borde y halo azul visibles para teclado. |
| Pulsado | Respuesta visual discreta sin desplazar la distribución. |
| Cargando | Indicador y texto de progreso; impedir envíos repetidos. |
| Deshabilitado | Atenuado y sin activación. Explicar la causa cuando sea necesaria para continuar. |
| Error | Comunicar el resultado fallido y ofrecer recuperación sin borrar los datos ingresados. |
2. Formularios
Sección titulada «2. Formularios»| Elemento | Referencia y comportamiento |
|---|---|
| Campo de texto | Altura de 44 px en táctil y 40 px con puntero preciso; fondo blanco, borde de entrada y radio de 12 px. |
| Etiqueta | Visible y asociada al control. |
| Ayuda | Debajo del campo y asociada mediante descripción accesible. |
| Error | Junto al campo, con texto específico y semántica de invalidez. |
| Textarea | Crece o permite desplazamiento para conservar el texto; sus límites dependen del requisito funcional correspondiente. |
| Contraseña | Valor oculto inicialmente y control con nombre accesible para mostrar u ocultar. |
| Código de verificación | Entrada que permita teclado apropiado y pegado; longitud y vencimiento corresponden al módulo funcional. |
| Select | Valor visible, indicador de despliegue y selección reconocible. |
| Checkbox | Selección independiente; etiqueta incluida en el área de interacción. |
| Radio | Elección única dentro de un grupo con nombre. |
| Switch | Cambio binario con estado comprensible y etiqueta visible. |
Cada campo debe enlazar su etiqueta, ayuda y error mediante las asociaciones accesibles de la plataforma utilizada. Las validaciones y los datos requeridos se definen en los módulos funcionales de este repositorio.
3. Tarjetas y superficies
Sección titulada «3. Tarjetas y superficies»| Elemento | Criterio |
|---|---|
| Tarjeta | Fondo blanco, texto azul oscuro, borde suave y sombra discreta. |
| Radio de tarjeta | 16,8 px. |
| Espaciado habitual | 20 px; variante compacta de 12 px. |
| Encabezado | Título, descripción opcional y acción relacionada. |
| Pie | Separación clara entre contenido y acciones. |
| Tarjeta interactiva | Hacer reconocible qué parte es accionable y proporcionar acceso por teclado. |
| Badge | Etiqueta breve de estado. No sustituye una explicación de error. |
| Avatar | Fotografía con recorte coherente o iniciales cuando no exista imagen. |
4. Navegación y selección
Sección titulada «4. Navegación y selección»| Elemento | Criterio |
|---|---|
| Navegación principal | Destino activo reconocible y etiquetas consistentes. |
| Pestañas | Diferenciar selección y foco; vincular cada pestaña con su panel. |
| Chips | Distinguir selección única, selección múltiple y filtros; reflejar su estado accesible. |
| Acordeón | Encabezado desplegable, indicador y estado expandido reconocible. |
| Pasos | Paso actual, pasos completados y pasos siguientes diferenciados mediante texto, forma y color. |
| Menú de acciones | Activador con nombre, opciones alineadas, foco visible y cierre predecible. |
5. Modales y paneles
Sección titulada «5. Modales y paneles»| Elemento | Referencia |
|---|---|
| Diálogo | Superficie blanca centrada, borde y sombra elevada. |
| Separación de ventana | Margen de 16 px como referencia. |
| Alto disponible | Altura visible de la ventana menos 32 px; permitir desplazamiento antes que recortar. |
| Ancho | Ajustado a la tarea; variante base de hasta 384 px desde el punto de corte correspondiente. |
| Encabezado | Título descriptivo y explicación breve cuando sea necesaria. |
| Cierre | Control visible, retorno del foco al activador y Escape cuando sea compatible con la operación. |
| Confirmación | Mostrar los datos afectados y un verbo concreto. |
6. Información y estados de contenido
Sección titulada «6. Información y estados de contenido»| Elemento | Comportamiento |
|---|---|
| Tabla | Encabezados comprensibles y acciones identificables. Adaptar columnas o presentación a móvil sin perder datos necesarios. |
| Calendario | Distinguir fecha disponible, seleccionada y deshabilitada. El modo informativo debe diferenciarse del modo de selección. |
| Alerta | Mensaje persistente cuando la información exige una decisión o bloquea el avance. |
| Notificación breve | Confirmaciones secundarias; no debe ser el único lugar donde aparece un error bloqueante. |
| Skeleton | Mantener una geometría compatible con el contenido esperado. |
| Vacío | Explicar por qué no hay datos y qué se puede hacer. |
| Error de carga | Mensaje localizado y reintento cuando corresponda. |
| Fotografía | Carga, encuadre, reemplazo y eliminación con acciones claras y alternativa de iniciales. |
7. Composición y semántica
Sección titulada «7. Composición y semántica»Los controles deben comunicar su función de manera coherente y utilizar la semántica accesible de cada plataforma.
| Elemento | Definición |
|---|---|
| Botón | Ejecuta una acción. Debe poder activarse con teclado y reflejar carga o deshabilitación cuando corresponda. |
| Enlace | Lleva a otro destino o recurso. Debe conservar un nombre que permita identificarlo. |
| Campo | Expone etiqueta, valor, obligatoriedad, ayuda y error cuando existan. |
| Grupo de selección | Identifica el propósito del grupo y diferencia selección única o múltiple. |
| Pestañas | Cada pestaña identifica su panel y comunica si está seleccionada. |
| Desplegable | El activador comunica si el contenido está abierto o cerrado. |
| Modal | Tiene nombre accesible, concentra temporalmente la interacción y devuelve el foco al cerrar. |
| Estado informativo | Expone el resultado mediante texto y lo anuncia de forma accesible cuando sea necesario. |
Las definiciones de Colores, Tipografía y Reglas de interacción se aplican a todo el catálogo.