Chip Componentes

Etiqueta compacta e removível, com animação de saída.

O que é

Representa uma seleção, tag ou filtro ativo — "React ×", "Ativo ×" — que o usuário pode remover clicando no ×.

Como funciona

Um listener único no documento escuta cliques em qualquer .sw-chip-x. Ao remover, aplica is-leaving (encolhe e desaparece) antes de tirar do DOM — pula direto pra remoção se prefers-reduced-motion estiver ativo.

Exemplos

Cores Ao vivo

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

<span sw-chip class="sw-chip-pri">Primário</span>
<!-- Variantes: sw-chip-sec | sw-chip-suc | sw-chip-ale | sw-chip-err -->

Removível, selecionado, outline e compacto Ao vivo

Frontend × Backend × Selecionado Outline Compacto

<span sw-chip>Frontend <span class="sw-chip-x">×</span></span>
<span sw-chip class="sw-chip-sel">Selecionado</span>  <!-- fundo sólido, estado ativo -->
<span sw-chip class="sw-chip-out">Outline</span>       <!-- sem fundo -->
<span sw-chip class="sw-chip-pp">Compacto</span>        <!-- tamanho reduzido -->

Atributos

Nenhum.

Variantes

sw-chip-pri / -sec / -suc / -ale / -err

cores — fundo translúcido na cor semântica

sw-chip-sel

fundo sólido — chip selecionada

sw-chip-out

sem preenchimento, só borda

sw-chip-pp

versão compacta (padding e fonte menores)

Eventos

sw:chip:remove

disparado no chip antes de começar a animação de saída

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorRating Próximo →LGPD / Cookies