Chips
Chips são componentes compactos utilizados para filtrar conteúdos com base em categorias ou atributos específicos, representados visualmente por um rótulo e ícones opcionais.
Uso
Os Chips são ideais para interfaces que exigem filtragem dinâmica de conteúdo com interação rápida e visualmente discreta. Devem ser usados quando for necessário indicar estados de seleção ou ativação de filtros, permitindo que o usuário compreenda e modifique rapidamente os critérios ativos. Seu formato compacto e estilo visual de cápsula os torna especialmente úteis em contextos responsivos e em áreas com limitação de espaço.
Anatomia
❖. Container
Estrutura externa que agrupa todos os elementos internos do componente e reflete visualmente os estados (hover, pressed, active, disabled) de acordo com a skin aplicada. Em variantes como "Clean", o contorno só aparece em estados de interação.
1. Label
Elemento obrigatório que define a categoria ou o critério de filtragem. Deve conter texto claro, curto e legível, indicando o conteúdo que será filtrado ao selecionar o Chip.
2. Icons (optional)
Ícones que reforçam visualmente o significado do label ou a ação relacionada. Podem ser posicionados antes (início) ou depois (fim) do label. O uso deve ser consistente e claro, evitando excesso de informações visuais.
Variantes
Filled
Variante padrão e mais enfática, utilizada para indicar que o filtro está ativo. Apresenta fundo sólido e alto contraste, sendo adequada para destacar seleções já aplicadas.
Tonal
Variante com menor contraste visual, usada para representar filtros disponíveis mas ainda não selecionados. Traz uma aparência mais sutil, mantendo a legibilidade.
Outlined
Variante com contorno e sem preenchimento de fundo. Ideal para contextos em que se deseja oferecer opções de filtro com o menor peso visual possível, preservando clareza e organização.
Use Cases
Referências
Histórico de Atualizações
Atualizado