Componentes
Chip
Seleção de filtros e categorias. Chips selecionam — não executam ações. Dois estados: ativo (verde) e inativo (transparente).
Visão geral
Ativo
Filtro selecionado. Background verde, texto escuro.
Inativo
Filtro disponível. Background transparente (igual ao fundo), texto em cinza.
Anatomia
1
Container
rounded-full (9999px) · px-3 py-1.5 · sem border · transition: all 0.15s
2
Label
Inter 12px / font-semibold · linha única · sem ícone
Estados
Inativo
bg-[#0f0f0f] · text-[#888] — transparente sobre o fundo da páginaAtivo
bg-[#C8F53C] · text-[#0f0f0f] — contraste alto para destacar seleçãoPressed
active:scale-95 active:opacity-70 · duração 0.15sEm scroll
overflow-x-auto scrollbar-none quando o conjunto é longo. Fade no fim indica mais itens.Do / Don't
Faça
Chips para filtrar. Múltiplos podem estar ativos simultaneamente.
Evite
Chips não executam ações — isso é função do Botão. Chips com texto longo ou shaped incorreto confundem.
→ scroll
Faça
Com muitas opções, use scroll horizontal. Os chips ficam no mesmo nível, sem quebrar linha.
Evite
Chips que quebram em múltiplas linhas ocupam muito espaço e perdem o padrão de strip horizontal.
Specs
| Propriedade | Ativo | Inativo |
|---|---|---|
| Background | #C8F53C | #0f0f0f (var(--bg)) |
| Cor do texto | #0f0f0f | #888 |
| Border radius | rounded-full · 9999px | |
| Padding | px-3 py-1.5 · 12px 6px | |
| Font size | 12px | |
| Font weight | 600 (semibold) | |
| Pressed | active:scale-95 active:opacity-70 | |
| Transição | all 0.15s | |
| Elemento HTML | <button> (não div) | |