Toggle button, botones primarios, secundarios, de icono o flotantes forman parte del lenguaje habitual de cualquier interfaz. Saber cuándo y cómo usar cada tipo de botón puede marcar la diferencia entre una experiencia de usuario fluida y una interfaz confusa. Esta guía reúne los 8 tipos de botones más habituales en diseño UI, explica para qué sirve cada uno y muestra ejemplos de uso.
Respuesta rápida
Los botones de una interfaz pueden clasificarse según su jerarquía, función y comportamiento. Entre los más habituales están el botón primario, secundario, terciario, toggle button, botón de icono, botón expandible, botón social y FAB. El adecuado depende de la acción que deba realizar el usuario y de la importancia que tenga dentro de la interfaz.
Índice
- Qué tipos de botones existen en UI
- 1. Botón primario (CTA)
- 2. Botón secundario (Ghost)
- 3. Toggle button
- 4. Botón expandible
- 5. Botones de icono
- 6. Botón de texto (terciario)
- 7. Botón social de acceso
- 8. FAB (Floating Action Button)
- Cómo elegir el tipo de botón adecuado
- Errores frecuentes al diseñar botones
- Conclusión
¿Qué tipos de botones existen en UI?
No existe una única clasificación universal de los botones de una interfaz. Pueden distinguirse por su jerarquía visual, por la acción que realizan o por su comportamiento. Una clasificación práctica incluye botones primarios, secundarios y terciarios, junto con componentes específicos como toggle buttons, botones de icono, botones expandibles, botones sociales y FAB.
Si hablamos exclusivamente de jerarquía de acciones, es habitual trabajar con tres niveles: primario, secundario y terciario. El primario destaca la acción principal; el secundario ofrece una alternativa; y el terciario reduce todavía más el peso visual para acciones de menor prioridad.
1. Botón primario (CTA)
Es el botón de acción principal en una interfaz. Se utiliza para guiar al usuario hacia la acción prioritaria, como “Comprar ahora”, “Enviar formulario” o “Empezar gratis”. Suele tener mayor peso visual que el resto mediante un fondo sólido, contraste suficiente y una etiqueta clara.
- Visibilidad alta
- Acción principal claramente identificable
- Contraste suficiente respecto al entorno
- Etiqueta breve que explica qué ocurrirá al pulsarlo
En una misma zona de la interfaz conviene evitar varios botones primarios compitiendo entre sí. Si todo destaca, la jerarquía visual deja de ayudar al usuario.
2. Botón secundario (Ghost)
Sirve como opción alternativa o complementaria a la acción principal. Suele tener menos peso visual y puede presentarse con borde y fondo transparente o mediante otros estilos menos prominentes. Es útil para acciones como “Cancelar”, “Volver” o consultar una opción alternativa.
Un ejemplo típico es colocar un botón secundario junto a un CTA primario. De esta forma se ofrecen dos caminos sin transmitir que ambos tienen la misma prioridad.
3. Toggle button
Un toggle button es un botón que mantiene un estado después de activarlo. Puede estar, por ejemplo, pulsado o no pulsado, permitiendo activar y desactivar una función sin abandonar el contexto actual.
Ejemplos habituales son un botón para silenciar audio, marcar un elemento como favorito o activar una herramienta de formato. El cambio entre ambos estados debe resultar evidente mediante su apariencia, un icono u otro indicador visual.
| Ejemplo | Estado A | Estado B |
|---|---|---|
| Silenciar audio | Sonido activo | Silenciado |
| Favoritos | No seleccionado | Seleccionado |
| Texto en negrita | Desactivada | Activada |
¿Qué diferencia hay entre un toggle button, un switch y un checkbox?
Aunque los tres pueden representar elecciones binarias, no son exactamente lo mismo. Un toggle button se comporta como un botón que conserva un estado, por ejemplo “pulsado” o “no pulsado”. Un switch representa normalmente una elección entre dos estados opuestos, como encendido y apagado. Un checkbox permite marcar o desmarcar una opción y también puede formar parte de grupos de selección.
La elección debe responder tanto al comportamiento como a la semántica de la interfaz. No conviene utilizar un switch, un checkbox o un toggle button únicamente porque visualmente nos guste más.
Accesibilidad de un toggle button
La accesibilidad es especialmente importante porque el usuario necesita conocer no solo qué hace el botón, sino también en qué estado se encuentra. WAI-ARIA utiliza el atributo aria-pressed para comunicar el estado de un toggle button a las tecnologías de asistencia.
<button type="button" aria-pressed="false">
Silenciar
</button>Cuando el botón pasa al estado pulsado, aria-pressed cambia a true. Además, el estado no debería comunicarse únicamente mediante un cambio de color: debe existir una diferencia suficientemente clara para usuarios que no puedan percibir ese color.
La especificación y los patrones de accesibilidad pueden consultarse en WAI-ARIA Authoring Practices de W3C.
4. Botón expandible
Un botón expandible permite revelar opciones adicionales sin mostrarlas permanentemente en la interfaz. Puede utilizarse cuando existe una acción principal y varias acciones relacionadas que conviene mantener ocultas hasta que el usuario las necesite.
Un patrón habitual consiste en un botón que, al pulsarlo, despliega otras acciones. Es especialmente útil cuando el espacio es limitado, aunque debe utilizarse con cuidado para no ocultar funciones que el usuario necesite descubrir fácilmente.
5. Botones de icono
Los botones de icono son compactos y visuales. Se utilizan cuando una acción puede representarse mediante un símbolo suficientemente reconocible: una lupa para buscar, una papelera para eliminar o un engranaje para acceder a determinados ajustes.
Ahorrar espacio no debe hacerse a costa de la comprensión. Un icono que parece evidente para quien diseña la interfaz puede no serlo para todos los usuarios.
Recomendaciones:
- Utilizar iconos reconocibles y coherentes
- Añadir una etiqueta accesible aunque visualmente solo aparezca el icono
- Usar tooltips cuando ayuden a aclarar acciones menos evidentes
- Evitar símbolos ambiguos o demasiado parecidos entre sí
6. Botón de texto (terciario)
El botón terciario tiene menos peso visual que los botones primario y secundario. Puede presentarse como una acción de texto sin fondo ni borde cuando interesa mantenerla disponible sin competir con las decisiones principales.
Puede utilizarse para acciones como “Leer más”, “Saltar” o “Ver detalles”. Según el contexto, un subrayado, un icono o una flecha pueden ayudar a comunicar que el elemento es interactivo.
Hay que distinguir, no obstante, entre botones y enlaces: un botón ejecuta una acción, mientras que un enlace normalmente lleva al usuario a otro recurso o ubicación. Que ambos puedan compartir un aspecto visual no significa que sean semánticamente equivalentes.
7. Botón social de acceso
El botón social de acceso permite iniciar sesión o registrarse mediante una cuenta existente de un proveedor externo. Su objetivo es reducir pasos y facilitar el acceso cuando el usuario prefiere no crear unas credenciales nuevas.
En este tipo de botones es importante respetar las directrices de identidad y diseño que establezca cada proveedor en lugar de recrear libremente sus logotipos, textos o estilos.
| Plataforma | Identificación habitual | Uso |
|---|---|---|
| Marca e identidad de Google | Inicio de sesión o registro | |
| Marca e identidad de Facebook | Inicio de sesión o registro | |
| Apple | Identidad de Apple | Inicio de sesión o registro |
8. FAB (Floating Action Button)
Un FAB (Floating Action Button) es un botón flotante destinado a destacar una acción importante dentro de una interfaz. Su posición y tratamiento visual hacen que permanezca claramente accesible respecto al contenido que lo rodea.
Puede utilizarse, por ejemplo, para crear contenido o iniciar una acción frecuente. Algunos FAB también pueden expandirse para mostrar varias acciones relacionadas, conectando este patrón con el botón expandible explicado anteriormente.
Cómo elegir el tipo de botón adecuado
La elección no debería empezar por el color o la forma del botón, sino por qué necesita hacer el usuario. Primero hay que identificar la acción y su importancia; después se decide qué componente y qué jerarquía visual representan mejor esa función.
| Necesidad | Tipo que puede encajar |
|---|---|
| Acción principal de la pantalla | Botón primario |
| Alternativa a la acción principal | Botón secundario |
| Acción de menor prioridad | Botón terciario |
| Mantener una función activada o desactivada | Toggle button o control binario adecuado |
| Acción reconocible con poco espacio | Botón de icono |
| Destacar una acción flotante importante | FAB |
| Mostrar varias acciones bajo demanda | Botón expandible |
Las guías de interfaz de Apple también insisten en que un botón debe comunicar claramente su propósito mediante su estilo, contenido y función, y en que los controles necesitan un área suficientemente cómoda para poder activarlos. Puedes consultar sus Human Interface Guidelines para botones.
Errores frecuentes al diseñar botones
- Dar la misma importancia visual a todas las acciones: obliga al usuario a decidir qué botón es realmente prioritario
- Utilizar etiquetas ambiguas: textos como “Aceptar” pueden ser menos claros que una acción específica como “Guardar cambios”
- Confundir enlaces y botones: su aspecto puede ser parecido, pero cumplen funciones semánticas diferentes
- Comunicar estados únicamente mediante color: un toggle necesita una diferencia perceptible que no dependa exclusivamente del color
- Utilizar iconos difíciles de interpretar: ahorrar espacio no compensa si el usuario tiene que adivinar la acción
- Crear objetivos demasiado pequeños: los controles necesitan espacio suficiente para poder pulsarlos o seleccionarlos con comodidad
Conclusión
En diseño de interfaces, elegir el tipo correcto de botón es mucho más que una decisión estética. Cada botón debe ayudar al usuario a comprender qué puede hacer, qué acción tiene mayor importancia y qué ocurrirá después de interactuar con él.
Toggle button, FAB, botones primarios, secundarios, terciarios o de icono responden a necesidades diferentes. La clave no está en utilizar todos los tipos disponibles, sino en escoger el componente cuya función, jerarquía y comportamiento encajen mejor con cada situación.
Una buena interfaz no necesita explicar constantemente sus botones: su diseño, etiqueta, posición y estado deberían proporcionar al usuario suficiente información para saber qué hacer.