Chips

Componente compacto e arredondado que mostra informação, escolha ou ação num espaço pequeno.

Hard

O que é

Chip é um componente pequeno e arredondado que encapsula um pedaço de informação ou ação num formato compacto. Ele aparece em filtro, tag, seleção e ação rápida, dando um jeito eficiente de interagir sem lotar a tela. O tamanho e a forma dele servem bem tanto a desktop quanto a mobile.

Em UX, ele dá clareza quando agrupa opções relacionadas ou mostra as escolhas que a pessoa já fez. Num e-commerce, por exemplo, os filtros ativos viram chips no topo dos resultados, lembrando o que está aplicado e dando o controle direto pra remover ou ajustar cada um.

O chip costuma carregar estado, como selecionado, não selecionado ou desabilitado, e pode ter ícone pra ficar mais claro. A acessibilidade pede rótulo claro, foco por teclado e suporte a leitor de tela, ainda mais quando o chip tem uma ação como remover, porque aí o “x” precisa ser anunciado. Ele é bom justamente pra escalar opção sem poluir a interface.

Em uma frase

Cada filtro que a pessoa escolhe vira um chip com "x" no topo dos resultados.

A pergunta que ele responde

Como mostro filtros ativos e tags num espaço pequeno sem poluir a tela?

Quando usar

Pra mostrar filtros ativos, tags, seleções ou ações rápidas num espaço compacto.

Como não usar

O erro é usar chip pra ação principal, que pede botão, ou esquecer de anunciar a ação de remover pro leitor de tela, deixando quem navega sem som perdido.

Na prática

Pense no e-commerce em que cada filtro que a pessoa escolhe vira um chip com "x" no topo dos resultados. Ela vê o que está ativo de relance e remove cada um com um toque.

Não confunda com

Vale separar chip de botão, porque cada um tem um peso diferente na tela. O botão dispara a ação principal, enquanto o chip representa uma opção, filtro ou tag em formato compacto, muitas vezes aparecendo em conjunto com outros. Em outras palavras, o botão é a ação central, e o chip é uma escolha entre várias.

D

Em inglês

Chips

Pronúncia

tchips

Também chamado de

chip, tag, pílula

Origem

n/a

Fonte

Saiba mais

Material Design, guidelines de chips