Our Insights About Modern Technology

Button

Es el componente primario para ejecutar acciones en la interfaz. Permite iniciar procesos, confirmar acciones, cancelar tareas o navegar a estados posteriores en un flujo. Puede representar acciones primarias, secundarias o semánticas como éxito, advertencia o peligro según su configuración de severidad.

Propósito

Usa button cuando la interfaz requiere que el usuario realice una acción explícita como:

Enviar o guardar datos
Confirmar procesos
Cancelar o volver
Disparar una transición de estado

Variantes

Estas modifican el tratamiento visual del botón.

Variantes por severidad

La gravedad define el tipo de botón.

Anatomía

El componente button está compuesto por varios elementos internos que trabajan en conjunto para comunicar una acción, permitir la interacción y proporcionar retroalimentación visual al usuario.

Cada parte cumple una función específica dentro de la experiencia.

Tamaños y medidas

Medidas de relleno y tamaño de cada botón.

Tamaño de las esquinas

Medidas de relleno y tamaño de cada botón.

Estados

Los estados visuales permiten que el botón comunique su situación actual y la respuesta del sistema frente a la interacción del usuario.

Acciones primarias

Las acciones primarias son la opción principal de una vista, flujo o contenedor.

Características

Fondo sólido con color primario
Contraste alto
Elevada prominencia visual
Dominancia en composición.

Es el punto de mayor peso visual y jerárquico dentro del sistema.

Acciones secundarias

Las acciones secundarias son las opciones alternativas o complementaria a la principal.

Características

Estilo outline o menor peso visual.
No domina la composición.
Claramente diferenciable del primary.

Reduce fricción en la toma de decisiones al ofrecer una alternativa clara sin desplazar el foco de acción principal.

Usos recomendados

Uso correcto

Botón “Cancelar” como acción secundaria y botón “Aceptar” como acción primaria en un formulario.

Uso incorrecto

Presentar dos botones con jerarquía primaria cuando uno corresponde a una acción secundaria, como “Volver”.