Botões

Use um componente Botão para ações que os usuários entendem e que não precisam de um rótulo de texto. Os botões se distinguem dos ícones pela forma circular.

Anatomia

A. Conteúdo

Os botões têm um único slot reservado para uma figura ou texto. Escolha um ícone que seja relevante para a ação que o botão realiza. Você pode usar texto com no máximo três caracteres se um ícone não for capaz de descrever a ação relevante. Use um componente de ícone se ele não descrever claramente a ação

B. Contêiner

Os contêineres de botões podem ser preenchidos por uma única cor sólida.


Tipos de botões

Botões ativar

Botões de ativação, que permitem que os usuários alternem entre dois estados.

Botões compactos

Os botões compactos parecem menores, mas têm uma área tocável maior. A área tocável padrão é de 48 x 48 dp.

Hierarquia

Use diferentes cores de preenchimento para indicar a hierarquia dos botões.

Prioridade alta

Os botões de alta prioridade contêm ações principais do app. Para botões de alta ênfase, use cores primárias ou secundárias para o contêiner e as cores "Em primária" e "Em secundário" para o conteúdo. Para mais informações, consulte Temas do Wear Material.

Prioridade média

Os botões de prioridade média são diferenciados pelo preenchimento de cor menos contrastante. Eles contêm ações que são menos importantes do que as ações principais. Use a cor dela para o contêiner e para o conteúdo.

Como alternativa, use o componente personalizado OutlinedButton para um botão de ênfase média. Ela tem um plano de fundo transparente, um traço colorido da variante de 60% de opacidade e conteúdo colorido.

Prioridade baixa (somente para figuras)

Os botões de prioridade baixa não têm preenchimento. Eles são mais adequados para áreas menores no mostrador do relógio em que uma organização compacta é necessária. Use a cor da plataforma no conteúdo.

Tamanho

Use botões de diferentes tamanhos para destacar ou remover o destaque de ações.

Grande

Ícone (30 x 30 dp)
Contêiner (60 x 60 dp)

Padrão

Ícone (26 x 26 dp)
Contêiner (52 x 52 dp)

Pequeno

Ícone (24 x 24 dp)
Contêiner (48 x 48 dp)

Extrapequena

Ícone (24 x 24 dp)
Contêiner (32 x 32 dp)

Recomendamos adicionar mais padding ao redor desse botão para criar uma área de toque de pelo menos 48 dp. Esse é o tamanho mínimo da área de toque para acessibilidade.

Uso

Use botões padrão para permitir que o usuário realize uma única ação, como aceitar ou recusar uma chamada ou iniciar um timer.

Use botões de ativação para permitir que o usuário ative ou desative uma opção, como selecionar e desmarcar dias da semana ou pausar e reiniciar um timer.

Layouts adaptáveis

Comportamento responsivo

Botão 1

O padding interno vai permanecer o mesmo, e as margens precisam ser porcentagens para impedir que os botões se estiquem muito, mantendo um tamanho relativo.

2 botões

Quando há dois botões, as margens internas percentuais são adicionadas para evitar que eles se estiquem demais e mantenham um tamanho relativo.

IMEs

Um ou dois botões

Os IMEs com dois ou um único botão completo sempre se estendem até as margens laterais, independentemente do tamanho da tela.

3 botões

Em telas menores que 225 dp, os botões permanecem circulares e não esticadas. Em telas maiores, com 225 dp ou mais, os botões podem se estender até as margens laterais.