Tipo 01
Selección única
Solo un segmento activo, como botones de opción.
Componentes Botones segmentados
Botones segmentados
Un botón segmentado agrupa de 2 a 5 opciones relacionadas en una sola pieza. Sirve para elegir una opción o varias, o para cambiar de vista.
Uso
Úsalos para cambiar la vista o filtrar un contenido con pocas opciones que deben verse todas.
- Cambiar entre vistas (día, semana, mes)
- Filtros de pocas opciones
- Más de 5 opciones
- Acciones distintas sin relación: usa botones separados
Principios
1
Agrupado
Las opciones se ven como un solo control.
2
Claro
La seleccionada lleva un chulo y otro color.
3
Breve
Una o dos palabras por segmento.
Tipos
Tipo 02
Selección múltiple
Varios segmentos activos, como casillas.
Tipo 03
Con íconos
Íconos con o sin texto.
Anatomía
12345
- Contenedor con borde
- Segmento seleccionado
- Chulo de selección
- Etiqueta
- Segmento sin seleccionar
Comportamiento
- Al seleccionar, aparece un chulo y el segmento toma el color secundario.
- En selección única, tocar otro segmento desmarca el anterior.
- Con teclado se navega con Tab o flechas según el tipo.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 40 dp (área táctil 48 dp) |
| Segmentos | 2 a 5 |
| Borde | 1 dp, color outline |
| Ícono de selección | 18 dp |
| Forma | completa en los extremos |
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
Única
role="radiogroup" y aria-checked en cada segmento.
Múltiple
role="group" y aria-pressed.
Solo íconos
aria-label en cada segmento.