Tipo 01
Estándar
Botones separados por un espacio pequeño.
Componentes Grupos de botones
Grupos de botones
Un grupo de botones reúne botones relacionados y les da una reacción conjunta: al presionar uno, se ensancha y los vecinos ceden espacio.
Uso
Úsalos para acciones del mismo tipo que conviene ver juntas: formato de texto, controles de reproducción.
- Barras de formato o de edición
- Controles de un reproductor
- Opciones excluyentes: usa botones segmentados
- Acciones sin relación
Principios
1
Relacionados
Todos los botones hacen cosas del mismo tipo.
2
Expresivos
Reaccionan juntos al toque con una animación de forma.
3
Flexibles
Mezclan tamaños y estilos de botón.
Tipos
Tipo 02
Conectado
Botones unidos; el seleccionado cambia de forma.
Anatomía
123
- Contenedor del grupo
- Botón
- Espacio entre botones
Comportamiento
- El botón presionado se ensancha y cambia de forma.
- Los vecinos se comprimen un poco para dejarle espacio.
- Al soltar, todo vuelve a su tamaño.
Medidas
| Medida | Valor de referencia |
|---|---|
| Espacio entre botones | aprox. 8 dp (estándar) / 2 dp (conectado) |
| Alto | según el tamaño de botón (40 dp en el mediano) |
| Botones por grupo | 2 a 7 |
Medidas de Material Design 2 en dp (en web, 1 dp ≈ 1 px de CSS; en iOS, 1 pt). Son de referencia: verifícalas en la guía oficial antes de usarlas en una evaluación.
Accesibilidad
Grupo
role="group" con aria-label: "Formato de texto".
Nombre
aria-label en cada botón de solo ícono.
Orden
Tab recorre los botones en orden.