Componentes Chips
Los chips son elementos compactos que representan un dato, una opción, un filtro o una acción.
Usa chips cuando hay varias opciones o datos cortos que deben verse juntos sin ocupar mucho espacio. En un slider, los chips sirven para filtrar las diapositivas por categoría.
Responden al toque: se seleccionan, se quitan o ejecutan algo.
Se distinguen de los botones por su forma redondeada y su color suave.
Una o dos palabras. Si el texto es largo, no es un chip.
Chips 01
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 02
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 03
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 04
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.
| Tipo | Al tocarlo | Selección |
|---|---|---|
| Entrada | La X lo elimina | No aplica |
| Elección | Queda marcado y desmarca los demás | Una sola |
| Filtro | Aparece o desaparece el chulo | Varias |
| Acción | Ejecuta algo de inmediato | No queda marcado |
aria-pressed o aria-checked.| Medida | Material 2 (dp) |
|---|---|
| Alto | 32 |
| Radio | 16 |
| Margen interno | 12 |
| Miniatura | 24 |
| Ícono de quitar | 18 |
| Espacio entre chips | 8 |