Tipo 01
Estándar
Sin contenedor. El de menor énfasis.
Componentes Botones de ícono
Botones de ícono
Los botones de ícono ejecutan acciones con un solo ícono. Material 3 los ofrece en cuatro estilos y pueden funcionar como interruptores (activado/desactivado).
Uso
Úsalos para acciones compactas y universales: favorito, compartir, editar, más opciones.
- Barras de herramientas y tarjetas
- Acciones que todos reconocen por el ícono
- Acciones que necesitan texto para entenderse
- La acción principal de una pantalla
Principios
1
Reconocible
El ícono es conocido por todos.
2
Compacto
Ocupa poco espacio con un área táctil cómoda.
3
Con estado
Puede alternar entre activado y desactivado.
Tipos
Tipo 02
Relleno
Contenedor de color principal. El de mayor énfasis.
Tipo 03
Tonal
Contenedor suave. Énfasis medio.
Tipo 04
Delineado
Borde. Énfasis medio, para pares con un relleno.
Anatomía
123
- Ícono
- Contenedor (en relleno, tonal y delineado)
- Área táctil de 48 dp
Comportamiento
- Al activarse, el ícono pasa de delineado a relleno y el contenedor cambia de color.
- Muestran una capa de estado al pasar el mouse, enfocar o presionar.
- Un tooltip con el nombre ayuda a quien no reconoce el ícono.
Medidas
| Medida | Valor de referencia |
|---|---|
| Ícono | 24 dp |
| Contenedor | 40 × 40 dp |
| Área táctil | 48 × 48 dp |
| Forma | completa (círculo) |
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
Nombre
aria-label obligatorio.
Interruptor
aria-pressed="true|false" si alterna.
Tooltip
Muestra el nombre al pasar el mouse o enfocar.