CSS Element

Chip / Tag [y2chip]

Chips compactos para filtros, seleções, categorias e tags - com avatar, cone, remoção e cores.

1. Básico

Padrão Primário Sucesso Alerta Erro Info Secundário

2. Outline

Padrão Primário Sucesso Alerta Erro

3. Removível

HTML CSS JavaScript TypeScript

// Ao clicar no botão de remover
document.querySelectorAll('.y2chip-rm').forEach(btn => {
  btn.addEventListener('click', () => btn.parentElement.remove());
});

4. Com Avatar / Ícone

A Ana Silva B Bruno Santos ? Favorito

5. Tamanhos

Small Normal Large

6. Clicável / Filtro

Todos Design Desenvolvimento Marketing

document.querySelectorAll('[y2chip].y2chip-clk').forEach(chip => {
  chip.addEventListener('click', () => {
    chip.classList.toggle('y2chip-act');
    chip.classList.toggle('y2chip-pri');
  });
});

Quick Reference

Atributo/Classe	Descrição
`[y2chip]`	Atributo base do chip/tag
`.y2chip-pri` `.y2chip-sec` `.y2chip-suc` `.y2chip-ale` `.y2chip-err` `.y2chip-per` `.y2chip-inf`	Variantes de cor (fundo tintado)
`.y2chip-out`	Estilo outline - combina com variantes de cor
`.y2chip-sm / .y2chip-lg`	Tamanhos menor e maior que o padrão
`.y2chip-clk`	Cursor pointer - indica chip clicável/filtrável
`.y2chip-act`	Estado ativo/selecionado
`.y2chip-rm`	Botão de remoção interno ()
`.y2chip-cls`	Variante estilizada do botão de fechar interno
`.y2chip-av`	Container de avatar ou ícone interno