Thumbnail Button

Thumbnail Button realizam ações de cliquem em uma thumbnail/foto, da mesma forma que um Button

Figma

---

Uso

Button Thumbnail realizam ações de cliquem em uma thumbnail/foto, da mesma forma que um Button. Eles geralmente são colocados em em header, indicando que o usuário está logado e que ali é o clique que abre o menu do usuário.

---

Anatomia

❖. Container

O container recebe a imagem necessária no contexto.

Há uma borda clara e fina nas laterais para que fique mais claro a demarcação do contorno da imagem

1. Playing mode (Opcional)

A aplicação do Playing mode é opcional a depender do contexto se houver a conexão com streaming e estiver tocando algo.

2. Thumbnail

A Thumbnail é necessária para o componente, já que se da o próprio nome. Nela é permitido mudanças de skin. Como Fill, Tonal e Outlined com aplicação de iconografia. E também uma skin Image, sendo a principal aplicação.

3. Badge (Opcional)

A aplicação do Badge é opcional pelo contexto aplicado. Geralmente visto quando o componente é aplicado no Header.

4. Plain Tooltip

O Plain Tooltip é sempre necessário em contextos de hover, já que o componente não possui labels.

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
30/10/2024	30/10/2024			Ver na tabela

Atualizações por data

Outubro 2024

30/10/2024

• Aplicação de um status de Playing para casos de uso com conexão com Spotify.

15/10/2024

• Atualização do State Disabled.

Setembro 2024

03/09/2024

• Atualização da nomenclatura do componente de "Button Thumbnail" para "Thumbnail Button"

Agosto 2024

31/07/2024

• Criação e documentação do novo componente

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.