Guía práctica de diseño de botones
En diseño de interfaces, hay pocos elementos tan pequeños y, al mismo tiempo, tan determinantes como un botón. Aunque su apariencia pueda parecer sencilla, su función es clave, porque actúa como el puente entre la intención del usuario y la acción que espera realizar.
Un botón bien ubicado y correctamente diseñado puede guiar al usuario con naturalidad, reducir la fricción en una tarea y hacer que la interacción con un producto digital se sienta fluida y clara.
Más allá de su forma o color, un botón comunica. Indica qué es importante, qué está disponible, qué viene después. Por eso, su diseño no puede dejarse al azar ni depender únicamente de preferencias estéticas. Cada decisión que se toma (el tamaño, el texto, el color, el espaciado o el estado) influye en cómo el usuario lo interpreta y lo usa.
Construcción visual del botón en UI
El diseño de un botón no se limita a dibujar un rectángulo con texto dentro. Requiere pensar en cómo se ve, cómo se toca y cómo se entiende. Cada detalle visual y funcional tiene un efecto en la claridad, la legibilidad y la accesibilidad del componente.
Tamaño y área interactiva
Uno de los primeros aspectos a definir es el tamaño. En interfaces móviles, se recomienda que el área interactiva mínima sea de 44×44 px, según las pautas de accesibilidad (WCAG), para asegurar que pueda tocarse cómodamente con el dedo. En escritorio, los botones suelen oscilar entre 32 y 48 px de alto, dependiendo de su jerarquía y el entorno donde se presentan.
- Botones principales: más grandes y visibles.
- Secundarios y terciarios: más discretos, pero siempre accesibles.
Espaciado interno y externo
El espaciado interno (padding) ayuda a que el texto del botón respire. Suelen usarse entre 12 y 24 px por lado, según el tamaño. Esto mejora tanto la apariencia como la zona activa de interacción.
En cuanto al espaciado externo, los botones deben mantener una separación visual suficiente respecto a otros elementos de la interfaz (textos, formularios, imágenes, etc.). Esto ayuda a evitar toques accidentales y a reforzar la jerarquía visual. Se recomienda mantener al menos 8 a 16 px de separación entre botones u otros componentes relacionados.
Tipos de botones según tamaño:
Los tamaños estándar de botones en UI, clasificados por tamaño (Small, Medium, Large) y basados en buenas prácticas de diseño responsive, accesibilidad y sistemas de diseño comunes como Material Design, Atlassian o IBM Carbon:
| Tamaño | Altura (px) | Padding horizontal (px) | Tamaño de texto (px) |
| Small (S) | 32-36 | 12-16 | 14 (Regular) |
| Medium (M) | 40-44 | 16-20 | 16 (Semibold) |
| Large (L) | 48-56 | 20-24 | 18 (Semibold) |
| Icon-only | 40-48 (Cuadrado) | N/A (Centrado) | 20-24 (Icono) |
Tipos de botones según jerarquía: primarios, secundarios y terciarios
No todos los botones tienen la misma función ni el mismo peso. Por eso es importante establecer una jerarquía clara, que ayude al usuario a distinguir cuál es la acción principal y cuáles son complementarias.
Para ello, se utilizan comúnmente tres tipos de botones: primarios, secundarios y terciarios. Cada uno cumple un rol específico y debe diseñarse con coherencia dentro del sistema.
Botón primario
- Función: representa la acción principal que el usuario debe realizar en una pantalla o componente.
- Uso: solo debe haber uno por bloque de contenido o flujo. Su presencia debe ser clara y destacada.
- Estilo:
- Color de fondo sólido (normalmente el color primario del sistema)
- Texto contrastado, normalmente en blanco
- Llamativo y visualmente predominante
Botón secundario
- Función: acompaña al botón primario ofreciendo una acción alternativa o complementaria.
- Uso: puede haber más de uno en la interfaz, pero sin competir visualmente con el primario.
- Estilo:
- Fondo blanco o transparente
- Borde con color neutro o primario
- Texto en color primario
Botón terciario o ghost
- Función: para acciones menos frecuentes, que no requieren protagonismo.
- Uso: útil en listas, componentes complementarios o como botones discretos en interfaces densas.
- Estilo:
- Sin fondo ni borde visible, solo texto
- Puede llevar un icono
- A menudo se percibe más como un enlace que como un botón convencional
Tipos de botones según su estado
Además de su jerarquía (primario, secundario, terciario), los botones deben contemplar distintos estados visuales que indiquen al usuario qué pueden hacer, qué han hecho o qué está ocurriendo. Estos estados ayudan a anticipar, confirmar o evitar errores.
Activo (default)
Es el estado por defecto, cuando el botón está disponible y listo para ser utilizado.
- Características:
- Visualmente destacado si es primario.
- Invita a la acción.
- Cumple con los contrastes mínimos de accesibilidad.
Hover (paso del cursor)
Aparece cuando el usuario pasa el cursor sobre el botón (en interfaces desktop).
- Características:
- Cambia ligeramente de color o sombra para indicar que es interactivo.
- No debe cambiar demasiado: solo una pista visual.
- No aplica en pantallas táctiles.
Focus (enfocado por teclado)
Se activa cuando el usuario navega con teclado y el foco está en el botón.
- Características:
- Indicado con un contorno visible (por ejemplo, línea o sombra externa).
- Importante para accesibilidad y navegación sin mouse.
- Debe ser distinto del estado hover.
Active (presionado)
Se muestra mientras el botón está siendo presionado o clicado.
- Características:
- Puede oscurecerse ligeramente o moverse sutilmente.
- Da respuesta inmediata a la interacción.
- Es un estado breve, solo visible durante la acción.
Disabled (deshabilitado)
Indica que el botón no está disponible para ser utilizado.
- Características:
- Menor contraste visual (pero debe ser legible).
- No responde al hover ni al foco.
- No debe eliminarse del DOM (debe ser detectado por lectores de pantalla).
Loading (cargando)
Se muestra cuando la acción del botón está en proceso (por ejemplo, al enviar un formulario).
- Características:
- Puede incluir un spinner o cambiar el texto a “Enviando…”.
- Evita dobles clics.
- Ayuda a gestionar la expectativa del usuario.
Success / Error (estado de resultado)
Algunas interfaces indican visualmente que una acción fue completada o fallida.
- Características:
- Success: puede cambiar a verde o mostrar un check.
- Error: puede mostrar un icono o un color de advertencia.
- Son estados transitorios y deben ir acompañados de contexto con un mensaje claro.
El texto en los botones: breve, claro y orientado a la acción
El texto de un botón debe ser una invitación clara a actuar. Es el mensaje que conecta la intención del usuario con lo que ocurrirá al hacer clic. Por eso, no se trata solo de escribir una palabra genérica, sino de comunicar con precisión qué acción se va a ejecutar, usando un lenguaje breve, directo y comprensible.
¿Qué debe indicar el texto de un botón?
- La acción que se va a ejecutar: el botón debe dejar claro qué pasará al pulsarlo: “Enviar formulario”, “Guardar cambios”, “Ver detalles”, “Descargar PDF”. Evita fórmulas genéricas como “Haz clic aquí” que no aportan contexto.
- El resultado esperado: si es posible, anticipa el efecto de la acción. Por ejemplo, en lugar de “Continuar”, puede ser más útil “Continuar al pago” o “Ir al resumen”.
- Un lenguaje orientado al usuario: usa verbos en infinitivo o imperativo, siempre desde la perspectiva de lo que el usuario quiere lograr: “Explorar contenido”, “Solicitar acceso”, “Crear cuenta”.
En definitiva, detrás de cada botón hay muchas decisiones que influyen directamente en cómo las personas interactúan con un producto. Por eso, cuando diseñamos botones, lo hacemos con atención al detalle, al contexto y a la experiencia completa.
Foto de portada de Olga Kovalski en Unsplash.
