Button

Los botones son elementos clave en cualquier interfaz y deben diseñarse con una jerarquía clara para diferenciar su importancia. Un botón primario debe destacar sobre los secundarios, ayudando a guiar la acción del usuario. Además, su ubicación y alineación deben ser coherentes para mantener una experiencia fluida.

Si incluyen iconos, estos deben ser intuitivos y fácilmente reconocibles. Del mismo modo, los textos en los botones deben ser concisos y descriptivos, dejando claro qué acción se espera del usuario.

Como utilizar el componente button

• Define su propósito: ¿Qué acción debe realizar el usuario?
• Elige el tipo de botón adecuado: Usa botones primarios para las acciones más importantes y secundarios para las menos urgentes.
• Ubícalo estratégicamente: Colócalo donde tenga sentido según la importancia de la acción.
• Usa un texto claro y directo: Evita ambigüedades y asegúrate de que el usuario entienda su función.
• Aprovecha los iconos del sistema de diseño: Asegúrate de que complementen el mensaje del botón sin generar confusión.
• Considera todos sus estados: Diseña para hover, clic, deshabilitado y estados de error.
• Garantiza la accesibilidad: Asegúrate de que el contraste cumpla con los estándares (AA) y que el botón sea navegable por teclado y lectores de pantalla.

En función de la relevancia de la acción realizada y de la superficie sobre la que se aplique, podrás elegir diferentes variantes

Las animaciones no solo aportan dinamismo visual, sino que también refuerzan la comprensión del usuario: ofrecen una respuesta inmediata, dan sensación de fluidez y hacen que la interfaz se sienta más viva y cuidada.

‍

Hover

Cuando el usuario pasa el cursor sobre un botón, se activa una animación que muestra una curva ascendente animada. Esta curva comienza desde la parte inferior del botón y se expande hacia arriba hasta cubrirlo completamente, generando un efecto visual envolvente que refuerza la idea de interacción inminente.