Tipo 01
Relleno
Mayor énfasis.
Componentes Botón dividido
Botón dividido
El botón dividido tiene dos partes: la acción principal a la izquierda y, a la derecha, una flecha que abre acciones relacionadas.
Uso
Úsalo cuando una acción tiene una opción habitual y variantes menos frecuentes.
- Enviar / programar / guardar borrador
- Exportar en el formato habitual o en otros
- Las opciones tienen el mismo peso: usa un menú
- No hay una opción claramente principal
Principios
1
Principal primero
La acción más común siempre a un toque.
2
Variantes a mano
Las demás en el menú de la flecha.
3
Unidos
Las dos partes se ven como un solo botón.
Tipos
Tipo 02
Tonal
Énfasis medio.
Tipo 03
Delineado
Énfasis bajo.
Anatomía
1234
- Botón principal
- Ícono (opcional)
- Botón de menú (flecha)
- Separación entre ambos
Comportamiento
- La flecha gira al abrir el menú.
- El menú se cierra al elegir o al tocar fuera.
- La parte principal funciona como un botón normal.
Medidas
| Medida | Valor de referencia |
|---|---|
| Alto | 40 dp (tamaño pequeño) |
| Separación entre partes | 2 dp |
| Forma interior | esquinas internas más rectas |
| Ícono de flecha | 24 dp |
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
Dos botones
Cada parte es un
Menú
aria-haspopup="menu" y aria-expanded en la flecha.
Nombre de la flecha
aria-label: "Más opciones de envío".