Search Bar

A pesquisa permite que as pessoas insiram uma palavra-chave ou frase para obter informações relevantes

Figma

---

Uso

A pesquisa é um método de navegação que permite que as pessoas encontrem informações rapidamente no produto. Os usuários inserem uma pesquisa ou na Search bar e, em seguida, veem os resultados relacionados.

---

Anatomia

❖. Container

O hover de clique para Actived da Search bar é em todo o container.

1. Icon (Opcional)

Slot de icone que pode ser utilizado opcionalmente.

2. Placeholder

O placeholder deve refletir o contexto da busca.

3. Button (Opcional)

O Button é opcional e pode ser utilizado para reforçar a ação de confirmar a busca.

---

Variantes

Tonal

A skin Tonal tem uma hierarquia maior em relação ao outilned, sem poluir a tela

Outlined

A skin Outlined é uma opção com hierarquia menor, utilizado para locais com muita informação.

---

Use Cases

Header

Menu

Artists

---

Referências

Material Design

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
14/08/2024	05/09/2024			Ver na tabela

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.