Segmented Button
Segmented Button permitem que as pessoas tomem duas ações com base em um mesmo contexto
Uso
Segmented Button comunicam ações duplas que os usuários podem tomar. Eles geralmente são colocados em locais que permitem múltiplas ações similares, mas que não cabem no layout.
Anatomia
❖. Container
O container não recebe cores, mas sim os componentes Button internamente.
A aplicação de appearance é no container principal e não em cada componente Button interno.
1. Button
Todas as regras do componente são do Button.
Opções de label e icon são alterados nos componentes Button internamente.
2. Slash
A cor background do slash é influenciado pelo appearance selecionado no componente principal.
Variantes
Fill
Os Fill Buttons têm o maior impacto visual e devem ser usados para ações importantes e finais que completam um fluxo, como chamada para Login.
Em Fill Segmented Button, o contêiner tanto os componentes Button, quanto o slash, devem ter contêineres com uma cor sólida de escala 600.
Tonal
Um Tonal Segmented Button é um meio-termo alternativo entre Fill e Outlined. Eles são úteis em contextos onde um botão de menor prioridade requer um pouco mais de destaque do que um contorno daria.
Outlined
Os Outlined Segmented Button são de média ênfase. Eles contêm ações que são importantes, mas não são a ação principal.
Use cases
Referências
Histórico de Atualizações
Atualizações por data
Setembro 2024
03/09/2024
Atualização da nomenclatura do componente de "Button Segmented" para "Segmented Button"
02/09/2024
Atualização da cor do slash/divider interno do componente + opacidade
Agosto 2024
31/07/2024
O componente, que se chamava Button - Dropdown, recebeu uma mudança de nome e layout, agora se chamará "Button - Segmented"
Mudança no layout foi adicionar um espaçamento superior e inferior ao slash do 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.
Atualizado