Pular para o conteúdo principal

Chip​

Componente Chip

📘 Modo de Uso​

O Chip deve ser utilizado para representar informações de forma compacta e visualmente distinta, como etiquetas, categorias, filtros ou entradas de texto.

Exemplo:

  • Em uma barra de pesquisa, chips podem indicar filtros aplicados, como “Data: Última semana” ou “Categoria: Notícias”.

🧩 Anatomia​

Anatomia do componente Chip

📋 Propriedades​

Propriedades do componente Chip

⌨️ Código​

opl.dataDisplay.component.chip

🎨 Variantes​

Estados​

Estados do Chip

Themes​

Temas do Chip

Tamanhos​

Tamanhos do Chip

🛡️ Boas Práticas e Acessibilidade​

  • Os chips devem permanecer na mesma posição quando selecionados. Reordenar a lista com base na seleção aumenta a carga cognitiva do usuário.
  • Em chips de filtro, se um novo chip for adicionado (ex.: via dropdown), ele deve aparecer no início da lista, mantendo os demais na mesma ordem.