Componentes
Wishlist Button
Botão de bookmark para wantlist. Estado inativo (outline branco) e ativo (preenchido lime). Animação de pop ao ativar: scale bounce em 0.6s.
Visão geral
Detalhe do Disco
Toque no bookmark no topo direito para alternar o estado
Anatomia
Lista de
desejos
desejos
Lista de
desejos
desejos
1
Ícone de Bookmark
SVG path de marcador. Inativo: fill:none stroke:#f5f5f5. Ativo: fill:#C8F53C stroke:#C8F53C. Tamanho w-6 h-6 (24×24px).
2
Label
"Lista de desejos" · font-size:10px · Inativo: color:#888. Ativo: color:#C8F53C. Centralizado abaixo do ícone.
3
Indicador de estado
Fill lime indica wishlisted. A transição visual (ícone vazio → preenchido) + animação de pop comunica o feedback de ação.
Estados
| Estado | Visual | Descrição |
|---|---|---|
| Padrão |
Lista de desejos
|
Disco não está na wantlist. Ícone outline branco. |
| Ativo |
Lista de desejos
|
Disco está na wantlist. Fill + stroke lime. Label lime. Animação pop ao entrar neste estado. |
| Animação (pop) |
Lista de desejos
|
bookmark-pop 0.6s cubic-bezier(0.36,0.07,0.19,0.97). Scale: 1 → 1.4 → 0.88 → 1.18 → 1. |
Demo interativo
Clique para alternar o estado e ver a animação de pop
Do / Don't
Faça
Posicione sempre no header da tela de detalhe do disco. A animação de pop (scale bounce 0.6s) deve ser a única resposta visual ao tap. Mantenha ícone e label visíveis.
Evite
Não use o Wishlist Button fora da tela de detalhe do disco. Não remova o label "Lista de desejos" — ele ancora a ação para novos usuários e previne toques acidentais.
Specs
| Propriedade | Valor |
|---|---|
| Ícone tamanho | w-6 h-6 (24×24px) |
| Estado inativo (stroke) | stroke:#f5f5f5 fill:none |
| Estado ativo (fill) | fill:#C8F53C stroke:#C8F53C |
| Label font-size | 10px |
| Label cor inativa | #888 |
| Label cor ativa | #C8F53C |
| Animação | bookmark-pop 0.6s cubic-bezier(0.36,0.07,0.19,0.97) |
| Scale keyframes | 0%:1 → 20%:1.4 → 50%:0.88 → 75%:1.18 → 100%:1 |