Os botões ajudam os usuários a iniciar ações ou fluxos. Escolha entre diferentes tipos de botões para dar ênfase.
Recursos
| Tipo | Vincular | Status |
|---|---|---|
| design | Fonte de design (Figma) | Disponível |
| Implementação | Jetpack Compose | Disponível |
Destaques
- Escolha o tipo de botão com base na importância da ação. Quanto mais importante a ação for, maior a ênfase no botão.
- Os botões precisam ter rótulos claros para indicar a ação que realizam.
- Coloque os botões de maneira lógica na tela, onde os usuários provavelmente esperam encontrá-los.
- Não exagere ao usar botões. Muitos botões em uma tela interrompem a hierarquia visual.
Variantes
Há seis tipos de botão:
- Botão preenchido
- Botão de contorno
- Botão de ícone
- Botão do ícone de contorno
- Botão longo
- Botão "Imagem"
Escolha o tipo de botão com base na importância da ação. Quanto mais importante a ação for, mais ênfase o botão terá.
Botão preenchido e contornado
Os botões preenchidos têm o maior impacto visual e devem ser usados para ações finais importantes que concluem um fluxo, como "Salvar", "Participar agora", "Confirmar" ou "Fazer o download".
Botões contornados são botões de ênfase média. Eles contêm ações que são importantes, mas não são a principal em um app. Botões contornados funcionam bem com botões preenchidos para indicar uma ação secundária e alternativa.
Anatomia
- Contêiner
- Texto do marcador
- Ícone (opcional)
Estados
Representação visual do status de um componente.
- Padrão
- Focado
- Pressionado
Especificação
Botão de ícone e contorno
Use botões de ícone para mostrar ações em um layout compacto. Os botões de ícone podem representar ações de abertura, como abrir um menu flutuante ou uma pesquisa, ou representar ações binárias que podem ser ativadas e desativadas, como adicionar aos favoritos ou favoritos. Eles também são usados para reproduzir ou pausar mídia.
Os botões de ícone podem ser definidos em três tamanhos: pequeno, médio e grande.
Anatomia
- Contêiner
- Ícone
Estados
- Padrão
- Focado
- Pressionado
Os estados são representações visuais usadas para comunicar o status de um componente ou elemento interativo.
Especificações
Botão largo
Os botões largos são usados para dar mais ênfase do que os botões normais. Eles contêm ações importantes. Os botões que representam opções relacionadas são agrupados. O grupo deve compartilhar uma plataforma comum.
Anatomia
- Contêiner
- Ícone principal
- Título
- Subtítulo
Estados
- Padrão
- Focado
- Pressionado
Os estados são representações visuais usadas para comunicar o status de um componente ou elemento interativo.
Especificações
Botão "Imagem"
Os botões de imagem normalmente são usados para mostrar miniaturas do conteúdo disponível no próximo nível de navegação. Em geral, eles são agrupados com ações relacionadas, e o grupo precisa compartilhar uma plataforma comum.
Anatomia
- Contêiner
- Ícone principal
- Título
- Subtítulo
- Camada de imagem, que consiste em:
- Scrim (sobreposição de estado)
- Gradiente (com base na cor da superfície)
- Imagem
Estados
- Padrão
- Focado
- Pressionado
Os estados são representações visuais usadas para comunicar o status de um componente ou elemento interativo.
Especificações
Uso
Em geral, os botões são usados para comunicar ações que um usuário pode realizar. Eles são frequentemente encontrados em elementos da interface, como caixas de diálogo, janelas modais, formulários, cards e barras de ferramentas.
Os botões são apenas uma opção para representar ações na interface. Não os use em excesso. O excesso de botões em uma tela afeta a hierarquia visual.
- Contêiner
- Ícone
- Texto do marcador
- Título
- Subtítulo
- Imagem
Contêiner
Os botões exibem um contêiner ao redor do conteúdo. O contêiner é dimensionado em 1,1x em foco, mantendo o padding interno. Confira algumas considerações para o contêiner:
- Defina a largura do contêiner com base no conteúdo com padding consistente.
- Definir a posição relativa do contêiner para a grade de layout responsivo.
- Use contêineres de cores sólidas para botões preenchidos.
- Use o traço e a cor de preenchimento em foco para os botões destacados. No foco, o contêiner recebe uma cor de preenchimento com o contorno.
- Para botões de amplitude e de imagem, a largura do contêiner é definida de acordo com a grade do layout.
- O tamanho, a posição e o alinhamento do contêiner podem mudar à medida que o contêiner pai é escalonado.
Os contêineres de botões de texto e ícone têm cantos totalmente arredondados. Os contêineres de botão de imagem e amplos têm contêineres arredondados de 12 dp.
O que fazer
Atenção
Ícone
Os ícones comunicam visualmente a ação do botão e ajudam a chamar a atenção. Eles devem ser colocados do lado inicial do botão. Os ícones estão sempre centralizados verticalmente no contêiner.
O que fazer
O que não fazer
Atenção
Texto do marcador
O texto do rótulo é o elemento mais importante de um botão. Ela descreve a ação que ocorre quando um usuário toca em um botão.
Use letras maiúsculas no texto do rótulo do botão, com letras maiúsculas na primeira palavra e em substantivos próprios. Evite ajustar o texto. Para o máximo de legibilidade, o texto do rótulo precisa permanecer em uma única linha.
O que fazer
Atenção
Imagem
Os botões de imagem sempre têm uma sobreposição de gradiente e um scrim sobre a imagem em segundo plano. A sobreposição de gradiente é definida de acordo com a cor do contêiner. O scrim muda de acordo com o estado.
Grupos de botões
Os botões aparecem juntos em uma linha ou coluna para manter a navegação consistente entre as ações. As seções a seguir descrevem as considerações.
Hierarquia dos dados
Cada tela precisa ter uma ação principal representada por um botão em destaque, geralmente largo. O botão precisa ser mais fácil de ver e entender. Outros botões precisam ter menos destaque e não podem distrair os usuários da ação principal.
O primeiro botão do grupo atua como a ação principal, já que o foco chega a ele primeiro.
Manter layout linear
- Layout de linhas
- Layout da coluna
Usar variantes de maneira lógica
No layout de coluna, as variantes de um único botão precisam ser mantidas. No layout de linha, variantes diferentes podem ser agrupadas em um grupo de botões, mas a lógica precisa ser clara. Os botões preenchidos e de contorno podem ser usados no mesmo grupo, mas garantem uma hierarquia clara para ações.
O que fazer
O que não fazer
Atenção
