Componente
Los botones permiten ejecutar una acción con un solo clic o toque: enviar, comprar, avanzar un slider. Esta guía sigue el orden de la documentación de Material Design y agrega lo que necesitas para usarlos dentro de un slider.
Un botón comunica una acción. Su forma, color y posición le dicen al usuario qué pasa si lo toca y qué tan importante es frente a los demás.
Si lleva a otra página, es un enlace (<a href>). Si hace algo (guardar, enviar, pasar al siguiente slide), es un botón (<button>). Confundirlos rompe la navegación con teclado y con lectores de pantalla.
Debe parecer tocable: forma, color o sombra lo separan del texto normal.
Está donde el usuario lo espera: al final de un formulario, abajo a la derecha en un diálogo.
La etiqueta dice exactamente qué pasa: "Descargar certificado", no "Aceptar".
Los primeros seis vienen de Material Design. Después siguen la jerarquía general, otros tipos frecuentes en la web y los chips. Todos los botones de esta sección funcionan: púlsalos.
Material 01 Énfasis bajo
Solo la etiqueta en color, sin fondo ni borde. Es el de menor peso visual.
Úsalo para: acciones secundarias en diálogos, tarjetas y barras: "Cancelar", "Ver más", "Omitir".
Evítalo si: es la acción principal de la pantalla: se pierde entre el texto.
Material 02 Énfasis medio
Etiqueta con un borde fino de 1 dp. Peso medio: se nota sin competir con el principal.
Úsalo para: acciones importantes pero no principales, o como pareja de un botón relleno.
Evítalo si: pones varios en fila con el mismo peso: el usuario no sabe cuál elegir.
Material 03 Énfasis alto
Fondo de color sólido y sombra ligera. Es el de mayor énfasis.
Úsalo para: la acción principal: enviar, comprar, guardar, continuar. Uno por vista.
Evítalo si: ya hay otro botón relleno cerca. Dos principales anulan la jerarquía.
Material 04
Varios botones unidos que se activan o desactivan. Muestran un estado, no solo ejecutan una acción.
Úsalo para: opciones de formato, vistas (lista / cuadrícula), filtros relacionados.
Evítalo si: solo hay una opción: usa un interruptor (switch) o una casilla.
Material 05
Círculo elevado con un ícono que flota sobre el contenido. Representa la acción más importante de la pantalla. Hay dos tamaños: normal (56 dp) y mini (40 dp).
Úsalo para: crear, redactar, agregar: la acción que define la pantalla, sobre todo en apps.
Evítalo si: la acción es destructiva, poco frecuente o hay más de una igual de importante.
Material 06
FAB con ícono y texto, en forma de píldora. Se entiende sin adivinar el ícono.
Úsalo para: cuando el ícono solo no es claro, o en pantallas anchas con espacio.
Evítalo si: el texto es largo: más de dos palabras ya no cabe bien.
Jerarquía 07
Los tres niveles de importancia juntos. Es la regla que ordena cualquier grupo de botones.
Úsalo para: formularios y diálogos con varias salidas. El ojo va primero al relleno.
Evítalo si: todas las opciones tienen el mismo peso: entonces usa una lista.
Jerarquía 08
Transparente con borde blanco, pensado para ir sobre fotos. Pariente del delineado.
Úsalo para: acciones secundarias encima de imágenes, como en la cabecera de un slider.
Evítalo si: la foto tiene zonas claras: el borde blanco desaparece.
Jerarquía 09
Botón grande y llamativo cuyo único fin es convertir: inscribirse, comprar, descargar.
Úsalo para: cabeceras, landing pages y el cierre de una página de venta.
Evítalo si: la página tiene tres CTA distintos: el visitante se dispersa.
Jerarquía 10
Texto subrayado que lleva a otra página. Ojo: un enlace navega, un botón ejecuta una acción.
Úsalo para: ir a otra página o sección.
Evítalo si: la acción guarda, envía o borra algo: eso es un <button>, no un <a>.
Otros 11
Solo un ícono, sin texto. Ahorra espacio en barras de herramientas y tarjetas.
Úsalo para: acciones universales que todos reconocen: compartir, favorito, más opciones.
Evítalo si: el ícono no es obvio. Si dudas, ponle texto o al menos un tooltip.
Otros 12
Abre una lista de opciones excluyentes al hacer clic.
Úsalo para: ordenar, elegir idioma, escoger una opción entre varias.
Evítalo si: son solo 2 o 3 opciones: muéstralas directamente.
Otros 13
Una acción principal a la izquierda y una flecha que abre variantes a la derecha.
Úsalo para: cuando hay una opción habitual y otras ocasionales: exportar, guardar como, enviar.
Evítalo si: el usuario no entiende que son dos botones distintos.
Otros 14
Tres líneas horizontales que abren el menú de navegación. Se convierte en X al abrirse.
Úsalo para: menús en celular, donde no cabe la navegación completa.
Evítalo si: en escritorio hay espacio para mostrar el menú: esconderlo reduce los clics.
Otros 15
Un signo más, solo o con texto, para crear un elemento nuevo en una lista.
Úsalo para: agregar filas, archivos, tareas o productos.
Evítalo si: ya hay un FAB que hace lo mismo en la pantalla.
Otros 16
Un FAB que al tocarlo despliega de 3 a 6 acciones relacionadas.
Úsalo para: cuando la acción principal tiene variantes: nueva foto, nuevo correo, nuevo evento.
Evítalo si: hay más de 6 acciones: entonces es un menú, no un FAB.
Otros 17
Ícono reconocible que envía el contenido a redes o mensajería.
Úsalo para: noticias, productos, resultados, certificados.
Evítalo si: pones diez redes en fila: elige las 2 o 3 que usa tu público.
Chips 18
Representa un dato que el usuario escribió o eligió (un contacto, una etiqueta) y se puede quitar con la X.
Úsalo para: destinatarios de un correo, etiquetas de un archivo, palabras clave.
Evítalo si: el elemento no se puede quitar: entonces no es un chip de entrada.
Chips 19
Permite elegir una sola opción de un grupo pequeño. Funciona como radio, pero más compacto.
Úsalo para: tallas, colores, jornadas, una opción entre 2 y 6.
Evítalo si: se puede elegir más de una: eso es un chip de filtro.
Chips 20
Permite marcar varias opciones a la vez. Aparece un chulo en las seleccionadas.
Úsalo para: filtrar resultados por categorías, marcas o temas.
Evítalo si: solo puede quedar una activa: usa chips de elección.
Chips 21
Dispara una acción relacionada con el contenido. Aparece según el contexto, como sugerencia.
Úsalo para: sugerencias rápidas: responder, agendar, ver mapa.
Evítalo si: la acción es permanente en la pantalla: usa un botón normal.
Un botón cambia de aspecto para responder al usuario. Si un estado no se diseña, el usuario no sabe si su clic funcionó. Material cubre el botón con una capa transparente cuya opacidad cambia según el estado.
Pasa el mouse, haz clic y navega con la tecla Tab sobre estos botones:
Material permite adaptar los botones a una marca cambiando tres cosas: color, forma y tipografía. Cambia las opciones y mira el resultado:
Medidas de Material Design 2 en dp. En la web, 1 dp equivale a 1 px de CSS; en iOS usa la misma cifra en pt.
| Componente | Material 2 (dp) | Web (px CSS) | iOS (pt) |
|---|---|---|---|
| Botón: alto | 36 | 36–44 | 44 (mínimo táctil) |
| Botón: ancho mínimo | 64 | 64 | 64 |
| Botón: margen interno lateral | 16 (texto: 8) | 16–24 | 16–20 |
| Botón: radio de esquina | 4 | 4–8 o píldora | 8–12 o píldora |
| Ícono dentro del botón | 18, a 8 del texto | 16–20 | 17–20 |
| Etiqueta | 14 sp, medio, mayúsculas, espaciado 1,25 | 14–16 px, 500 | 17 pt, semibold |
| Área táctil mínima | 48 × 48 | 24 × 24 (WCAG AA), ideal 44 | 44 × 44 |
| Espacio entre botones | 8 | 8–16 | 8–16 |
| FAB normal / mini | 56 / 40, ícono 24 | 56 / 40 | 56 / 40 |
| FAB extendido | alto 48, radio 24 | 48 | 48–50 |
| FAB: margen al borde | 16 (celular) / 24 (tablet, escritorio) | 16–24 | 16–20 |
| Chip | alto 32, radio 16, margen 12 | 32 | 32 |
| Elevación (sombra) | Relleno 2 → 8 al presionar; FAB 6 → 12 | box-shadow | sombra suave |
Las páginas que compartiste (m2.material.io) son de Material Design 2. La versión vigente, Material 3, cambió varias medidas: los botones miden 40 dp de alto, tienen forma de píldora y la etiqueta va en minúscula de oración; el FAB pasó de círculo a cuadrado redondeado. M2 sigue siendo muy útil para enseñar, porque sus reglas son claras y estables, pero vale la pena decirlo en clase.
Un slider es, en gran parte, un conjunto de botones. Cada número del ejemplo corresponde a un botón con su propia regla.
| # | Botón | Tipo | Medida visible | Área táctil | Regla |
|---|---|---|---|---|---|
| 1 | CTA del slide | Relleno | 40–48 px de alto | ≥ 44 px | Uno solo por diapositiva. Verbo claro. |
| 2 | Acción secundaria | Fantasma | Igual al CTA | ≥ 44 px | Nunca más llamativo que el CTA. |
| 3 | Flechas anterior / siguiente | Ícono | 40–48 px | ≥ 44 px web / 48 dp app | Con aria-label. En celular se pueden ocultar si hay swipe. |
| 4 | Puntos (bullets) | Ícono / indicador | 8–12 px | ≥ 24 px | El punto se ve pequeño, pero el área de clic no. |
| 5 | Pausa / reproducir | Ícono toggle | 32–40 px | ≥ 24 px | Obligatorio si avanza solo más de 5 s (WCAG 2.2.2). |
<button> para acciones. Un <div> con clic no funciona con teclado ni con lector de pantalla.
Todo botón de solo ícono necesita aria-label="Siguiente".
Texto del botón: 4,5:1 frente a su fondo. Borde o forma del botón: 3:1 frente a la página (WCAG 1.4.11).
Nunca quites el contorno de foco (outline: none) sin poner otro igual de visible.
Toggles y chips de filtro usan aria-pressed; los desplegables, aria-expanded.
Si un botón está apagado, explica cerca por qué: "Completa tu correo para continuar".
Las páginas de Material Design no se pudieron leer de forma automática porque requieren JavaScript. Las medidas de Material 2 provienen de la guía publicada; verifícalas en el enlace antes de usarlas en una evaluación.