Componente de botón para Figma: 1.128 variantes

🔘 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.

La vista previa permite comparar estados visuales claros y oscuros. Comprueba la adaptación a distintas pantallas y la accesibilidad cuando implementes el componente en tu producto.

🧱 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. La vista previa permite revisar su aspecto antes de implementar la interacción en código.

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

Las variantes de Figma ayudan a planificar etiquetas legibles, estados de foco visibles y una jerarquía clara de acciones. Comprueba el contraste y el tamaño de los controles con los colores y el layout definitivos.

El archivo de diseño no añade navegación por teclado ni soporte para lectores de pantalla al producto. Al implementar los botones, usa elementos nativos, da un nombre accesible a las acciones solo con icono y prueba los estados de foco, deshabilitado y carga en la interfaz final.

🧩 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.

El kit ofrece el diseño en Figma, no código Tailwind listo para usar. El equipo de desarrollo puede mapear sus tokens visuales y estados a sus propias clases y componentes de Tailwind, y comprobar el resultado en distintos tamaños de pantalla y métodos de entrada.

Documenta ese mapeo para trasladar los cambios de diseño a la interfaz implementada.

✅ 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.