Botões
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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.
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.
O conteúdo e os exemplos de código nesta página estão sujeitos às licenças descritas na Licença de conteúdo. Java e OpenJDK são marcas registradas da Oracle e/ou suas afiliadas.
Última atualização 2024-07-12 UTC.
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Não contém as informações de que eu preciso"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Muito complicado / etapas demais"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Desatualizado"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problema na tradução"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Problema com as amostras / o código"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Outro"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Fácil de entender"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"Meu problema foi resolvido"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Outro"
}]
{"lastModified": "\u00daltima atualiza\u00e7\u00e3o 2024-07-12 UTC."}
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2024-07-12 UTC."]]