Botones en UI: jerarquía, estados, tamaños y microcopy que invitan a actuar

En una revisión de una tienda online de aceite de oliva de la Axarquía contamos once estilos de botón distintos. Verdes, granates, con borde, sin borde, redondeados, cuadrados, en mayúsculas y en minúsculas. Ninguno estaba mal por separado. Juntos, hacían que cada pantalla pareciera de una web diferente y que el botón de «Añadir a la cesta» compitiera de tú a tú con el de «Suscríbete a la newsletter». Reducirlos a tres estilos con una jerarquía clara fue lo primero que hicimos, antes de tocar colores o fotos.

El botón es el componente más pequeño con más responsabilidad de una interfaz. Es el lugar exacto donde una intención se convierte en acción: reservar, pagar, enviar, guardar. Por eso merece una atención desproporcionada a su tamaño. Esta guía repasa las decisiones que tomamos siempre al diseñar botones: jerarquía, anatomía, tamaños, estados, accesibilidad, texto y código.

01La jerarquía: un botón protagonista por decisión

La primera pregunta no es cómo se ve un botón, sino cuántos tipos de botón necesita el producto y qué significa cada uno. Una jerarquía clara le dice a la persona, sin palabras, cuál es el paso más probable.

La regla que mejor funciona es sencilla: un botón primario por zona de decisión. Si en la misma pantalla hay dos botones con relleno sólido del mismo color, el ojo no sabe cuál elegir y la persona duda. Cuando hay varias acciones, una es primaria y el resto bajan a secundarias o terciarias.

El color del botón primario merece una reflexión aparte. Lo ideal es reservar un color para la acción y usarlo con disciplina: si ese mismo color aparece en titulares, iconos decorativos y fondos de sección, pierde su capacidad de señalar. A menudo el color de acción es el de marca; otras veces es un tono complementario que contrasta mejor. Lo importante es que sea inconfundible.

Botones destructivos con calma

Para acciones que borran o no se pueden deshacer, lo que funciona es combinar tres cosas: un color que lo señale (normalmente rojo, en estilo secundario para que no invite a pulsar por inercia), un texto que diga exactamente qué se borra («Eliminar la reserva del 14 de marzo», mejor que «Eliminar») y, cuando la acción es grave, un paso de confirmación o la posibilidad de deshacer durante unos segundos. Deshacer suele ser más amable que preguntar «¿Estás seguro?», porque no interrumpe a quien sabe lo que hace.

02Anatomía y tamaños

Un botón tiene pocas partes: contenedor, etiqueta de texto y, opcionalmente, un icono a la izquierda o a la derecha. Las decisiones están en las proporciones.

• →Altura: 32 px para interfaces densas (tablas, herramientas internas), 40 px como estándar de escritorio y 48 px en móvil. Son valores que salen de un sistema de espaciado de 8 puntos y se alinean bien con campos de formulario de la misma altura.
• →Relleno horizontal: entre 16 y 24 px. Como orientación, el relleno lateral suele ser una vez y media o dos veces el vertical.
• →Ancho mínimo: fijar un mínimo (por ejemplo 88 o 96 px) evita botones raquíticos con textos cortos como «OK».
• →Texto: el mismo tamaño que el cuerpo o uno por debajo (14 a 16 px), con un peso medio o seminegrita para que se distinga del texto corriente.
• →Icono: 16 a 20 px, separado 8 px del texto. A la izquierda si refuerza el significado (un candado en «Pagar»), a la derecha si indica dirección (una flecha en «Siguiente»).
• →Radio de esquina: coherente con el resto de la interfaz. Esquinas de 4 a 8 px transmiten sobriedad; los botones completamente redondeados (tipo píldora) resultan más amables y cercanos.

Tamaño táctil y separación

WCAG 2.2 introdujo el criterio 2.5.8, que pide que los objetivos táctiles midan al menos 24×24 px o tengan suficiente espacio libre alrededor. Es un mínimo. Apple recomienda 44×44 pt y Material Design 48×48 dp, y esas son las medidas que usamos en móvil. Entre dos botones contiguos, al menos 8 px de separación.

La ley de Fitts, que explicamos en leyes de UX: Fitts, Hick y Jakob, lo resume: cuanto más grande y más cerca está un objetivo, más rápido y certero es acertarlo. Por eso en móvil los botones principales de un formulario o de una ficha de producto suelen ocupar todo el ancho, y a menudo se fijan al pie de la pantalla, donde el pulgar llega sin estirarse.

03Los seis estados de un botón

Un botón no es una imagen; es un componente que cambia. En la presentación de diseño casi siempre se ve solo su estado normal, pero la persona que lo usa ve todos. Estos son los que diseñamos siempre:

1. 01Normal (default). Su aspecto en reposo. Debe parecer pulsable: color sólido o borde claro, nunca confundible con una etiqueta o un texto destacado.
2. 02Hover. Al pasar el ratón por encima. Un cambio sutil de tono (un 8 a 12 % más oscuro o más claro) basta. En pantallas táctiles no existe, así que ninguna información importante puede depender de él.
3. 03Foco. Cuando se llega al botón con el teclado. Es imprescindible para quien navega sin ratón. Un contorno de 2 px con contraste de al menos 3:1 frente al fondo, separado 2 px del botón, funciona en casi cualquier diseño.
4. 04Pulsado (active). El instante en que se presiona. Un tono algo más oscuro o una ligera reducción de escala (98 %) da sensación de respuesta física.
5. 05Cargando. Cuando la acción tarda. Se sustituye o acompaña el texto con un indicador de progreso, se mantiene el ancho del botón para que nada salte y se bloquean pulsaciones repetidas. Así evitamos pedidos duplicados.
6. 06Desactivado. Cuando la acción no está disponible. Menos contraste y cursor normal. Úsalo con moderación y explica siempre por qué no se puede pulsar.

A estos seis se puede añadir un séptimo muy agradecido: éxito, un instante en que el botón confirma que la acción se ha completado («Guardado ✓») antes de volver a su estado normal.

Clave: un botón está bien diseñado cuando cada uno de sus estados responde a una pregunta: ¿se puede pulsar?, ¿lo estoy señalando?, ¿lo he pulsado?, ¿está pasando algo?, ¿ha funcionado?

Sobre el botón desactivado

Es tentador desactivar el botón de enviar hasta que el formulario esté completo. La alternativa que suele funcionar mejor es dejarlo activo y, al pulsarlo, señalar con claridad qué campos faltan. Un botón gris no dice qué hacer, y su bajo contraste lo hace difícil de leer para personas con baja visión. Si en tu caso tiene sentido desactivarlo, añade un texto cercano visible («Elige una fecha para continuar»).

04Contraste y accesibilidad

Un botón accesible es un botón que funciona para más gente, también en un móvil a pleno sol en el paseo marítimo. Estas son las referencias de WCAG 2.2 que aplicamos:

• →Texto del botón: contraste de 4,5:1 con el fondo del botón (3:1 si el texto es grande: 18,66 px en negrita o 24 px en regular).
• →Límite del botón: si el botón se distingue del fondo por su relleno o su borde, ese contorno necesita un contraste de 3:1 con lo que lo rodea (criterio 1.4.11, contraste de elementos no textuales).
• →Foco visible: siempre presente y claramente distinguible.
• →Nombre accesible: los botones de solo icono necesitan un texto alternativo («Cerrar», «Abrir menú») mediante aria-label o texto oculto visualmente.
• →Elemento correcto: <button> para acciones y <a> para navegar. Así funcionan el teclado (Intro y Espacio) y los lectores de pantalla sin trucos.

Puedes consultar los criterios completos en la especificación de WCAG 2.2 del W3C.

05El texto del botón: verbos que dicen qué pasa

La etiqueta del botón es probablemente el microcopy más leído de toda la interfaz. La fórmula que mejor funciona es verbo + objeto, en lenguaje de quien lo pulsa:

• →«Reservar mesa» mejor que «Enviar».
• →«Descargar el presupuesto» mejor que «Clic aquí».
• →«Crear mi cuenta» mejor que «Registrarse ahora».
• →«Pagar 48,00 €» mejor que «Continuar», en el último paso de un pago.

Algunos criterios que nos sirven:

• →Coherencia con el título. Si un diálogo se titula «¿Eliminar este proyecto?», los botones dicen «Eliminar proyecto» y «Mantener», no «Sí» y «No».
• →Brevedad. De una a cuatro palabras. Si necesitas más, probablemente falta un texto de apoyo encima del botón.
• →Concreción. Cuanto más clara es la consecuencia, menos dudas. Un botón que dice el precio total en el último paso de un pago transmite transparencia.
• →Primera persona con medida. «Quiero mi presupuesto» puede funcionar en una web cercana; en interfaces más funcionales, el infinitivo resulta más limpio.

Profundizamos en el tono y la escritura de todos estos textos en microcopy: los textos pequeños de tu web.

06Orden y colocación de los botones

Cuando hay dos o más botones juntos, ¿cuál va a la derecha? Las convenciones varían entre plataformas: en macOS e iOS la acción principal suele ir a la derecha; en Windows, tradicionalmente, «Aceptar» va a la izquierda de «Cancelar». En la web no hay una regla universal, pero sí algunos criterios que dan buen resultado:

• →En flujos de varios pasos, la acción de avanzar a la derecha y la de volver a la izquierda, siguiendo la dirección de lectura.
• →En formularios de una columna, el botón principal alineado con el borde izquierdo de los campos, justo debajo del último, donde termina la mirada.
• →En móvil, el botón principal a ancho completo y, si hay secundario, debajo o como enlace de texto.
• →En diálogos, el orden que uses, úsalo siempre igual en todo el producto.

La coherencia pesa más que la convención concreta: si en todo el producto el botón principal está siempre en el mismo sitio, la gente lo encuentra sin buscarlo.

07Del diseño al código

Un botón bien diseñado necesita llegar al navegador con todos sus estados. Este es un ejemplo mínimo que usamos como base, con variables para que los colores salgan del sistema de diseño:

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;          /* 48px */
  min-width: 6rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md, 8px);
  font: 600 1rem/1.5 var(--font-ui, system-ui);
  background: var(--color-action);
  color: var(--color-on-action);
  border: 0;
  cursor: pointer;
  transition: background-color 150ms ease, transform 100ms ease;
}
.btn:hover { background: var(--color-action-hover); }
.btn:active { transform: scale(0.98); }
.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.btn[aria-busy="true"] { cursor: progress; }
.btn:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

Algunos detalles: :focus-visible muestra el contorno de foco al navegar con teclado sin que aparezca al hacer clic con el ratón; aria-busy comunica el estado de carga a las tecnologías de apoyo, y prefers-reduced-motion respeta a quien ha pedido menos animación en su sistema.

08Checklist rápido para revisar tus botones

1. 01¿Hay como mucho un botón primario en cada zona visible?
2. 02¿Existen tres o cuatro estilos de botón como máximo en todo el producto?
3. 03¿Miden al menos 44 px de alto en móvil?
4. 04¿Se ve el foco al navegar con el tabulador?
5. 05¿El texto y el contorno cumplen 4,5:1 y 3:1 respectivamente?
6. 06¿Hay estado de carga en las acciones que tardan más de medio segundo?
7. 07¿Cada etiqueta empieza por un verbo y dice qué pasará?
8. 08¿Los botones de solo icono tienen un nombre accesible?

Si respondes que sí a las ocho, tus botones están haciendo bien su trabajo.

Los botones son el punto donde se concentra todo lo que una web quiere conseguir, y por eso los diseñamos como un pequeño sistema y no como piezas sueltas. Es parte de cada proyecto de diseño web y experiencia digital que hacemos en SIMA, desde la jerarquía hasta el último estado en código. Si quieres que revisemos los de tu web o tu aplicación, escríbenos y lo vemos juntos.