Botón

🔘 Resumen del Componente

El componente Botón en Emvi UI está diseñado para ser uno de los elementos más versátiles y reutilizables del sistema de diseño. Juega un papel central en las interfaces al permitir acciones, navegación o envío de formularios.

Cada botón se construye sobre una estructura basada en tokens que permite una rápida personalización de colores, tamaños y estados sin comprometer la consistencia visual. Las variantes disponibles cubren una amplia gama de casos de uso: botones primarios, secundarios, terciarios, de texto, con iconos y compuestos.

Este componente está optimizado para entornos responsivos, soporta temas claros/oscuros y mantiene accesibilidad en todos los dispositivos.

🧱 Tipos y Jerarquía de Botones

El sistema de botones en Emvi UI está estructurado para reflejar jerarquías de acción claras. Esto permite a los usuarios identificar visualmente la prioridad de cada botón según su contexto.

Primario: Destaca la acción principal en una pantalla o flujo. Utiliza color sólido y alto contraste.

Secundario: Complementa al botón primario, adecuado para acciones secundarias. Puede usar contorno o fondo menos prominente.

Terciario: Para acciones menos frecuentes o alternativas. Normalmente aparece como texto simple con poco peso visual.

Botón de Texto: Para acciones no críticas o interfaces ligeras.

Botones Destructivos: Reservados para acciones críticas (ej. eliminar), usando colores y mensajes que alertan al usuario.

Cada tipo tiene su propia configuración de fondo, borde, sombra y tipografía para garantizar consistencia en todo el sistema.

📏 Tamaños, Espaciado y Escala

Emvi UI incluye una gama de tamaños predefinidos para botones, diseñados para adaptarse a varios niveles de jerarquía y necesidades de interfaz. Las variantes incluyen XS, SM, MD, LG y XL, cada una emparejada con tamaños de fuente, padding y alturas de línea específicos.

El espaciado interno está calibrado para mantener equilibrio visual, incluso al añadir elementos como iconos o indicadores de carga. Esta escala garantiza una alineación adecuada con otros componentes del sistema como inputs, cards o headers.

El sistema de espaciado sigue la cuadrícula base de Emvi UI, permitiendo una integración fluida en diseños modulares y layouts responsivos.

⚙️ Estados Interactivos y Comportamiento

El componente Botón en Emvi UI incluye estados de interacción diseñados para mejorar la experiencia de usuario y proporcionar retroalimentación visual clara. Estos estados están definidos por tokens globales y cumplen con las recomendaciones de accesibilidad WCAG.

Hover: Aumenta ligeramente el contraste de fondo o borde para indicar interactividad.

Focus: Añade un anillo de enfoque visible para navegación por teclado.

Active: Simula una pulsación mediante oscurecimiento sutil o cambio de sombra.

Disabled: Reduce la opacidad, elimina la interactividad y mantiene contraste suficiente para su reconocimiento.

Loading: Muestra un indicador de carga centrado, reemplazando o acompañando la etiqueta del botón.

Todos los estados son responsivos y compatibles con modos claro y oscuro.

🖇️ Botones con Iconos y Botones Compuestos

Emvi UI soporta botones mejorados mediante iconos y contenido compuesto, mejorando la usabilidad y comunicación visual para acciones clave. Los iconos pueden colocarse a la izquierda o derecha de la etiqueta y se alinean automáticamente según el tamaño del botón.

El sistema permite:

Botones con icono + texto.

Botones solo con icono (para interfaces densas o móviles).

Botones compuestos con etiquetas secundarias, descripciones o badges.

Todos los iconos escalan relativamente al tamaño del botón y respetan el padding predefinido, garantizando legibilidad y consistencia. También están integrados con el sistema de tokens para mantener sincronización de color y estilo.

♿ Accesibilidad y Usabilidad

Los botones en Emvi UI están diseñados con la accesibilidad como prioridad. Cada variante cumple con los requisitos de contraste establecidos por WCAG AA/AAA para estados activos e inactivos.

Los elementos interactivos incluyen atributos y roles aria apropiados (button, aria-disabled, aria-busy) para garantizar compatibilidad con lectores de pantalla. Los botones son completamente navegables por teclado e incluyen indicadores de enfoque visibles para mejorar la usabilidad en dispositivos sin puntero.

El texto de los botones mantiene un tamaño mínimo de fuente y padding táctil, cumpliendo con estándares de accesibilidad móvil.

🧩 Integración con Figma y Tailwind

El componente Botón en Emvi UI está construido para una integración perfecta con herramientas modernas de diseño y desarrollo. En Figma, cada botón está disponible como componente atómico y variante reutilizable (por tipo, tamaño, estado e icono), vinculado a estilos globales de texto, color y efectos.

En Tailwind CSS, los botones se implementan usando clases de utilidad predefinidas como bg-primary-500, rounded-md, px-4, hover:bg-primary-600, entre otras. Los tokens y variantes pueden extenderse mediante configuración en el archivo tailwind.config.js.

Esta integración directa de diseño a código garantiza consistencia visual, reduce duplicación de estilos y mejora la productividad en equipos multidisciplinarios.

✅ Mejores Prácticas de Implementación

Para mantener la consistencia visual y funcional del sistema de botones en Emvi UI, se recomiendan las siguientes mejores prácticas:

Usar variantes semánticas apropiadas según la jerarquía de acciones.

Evitar sobrecargar botones con múltiples iconos o texto excesivamente largo.

Usar estados disabled solo cuando la acción no debe realizarse, no como indicador de inactividad temporal.

Incluir indicadores de carga en acciones asíncronas para mejorar la percepción de respuesta.

Asegurar que todos los botones tengan etiquetas accesibles (aria-label) cuando el contenido no sea textual.

Estas prácticas mejoran la experiencia de usuario, refuerzan la accesibilidad y apoyan la mantenibilidad del sistema.