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 são bem conhecidas pelos usuários e não precisam de um rótulo de texto. Os botões se diferenciam dos ícones por ter um formato
circular.
Anatomia
A. Conteúdo
Os botões têm um único slot reservado para uma figura ou texto. Escolha um ícone relevante para a ação realizada pelo botão. Você pode usar texto com até três caracteres se não for possível descrever a ação relevante com uma figura. Caso não seja possível descrever uma ação de maneira clara usando uma figura,
considere usar um componente de ícone.
B. Contêiner
Os contêineres de botões podem ser preenchidos por uma única cor sólida.
Botões ativar
Os botões ativar permitem que os usuários alternem entre dois estados.
Botões compactos
Os botões compactos parecem menores, mas oferecem uma área de toque 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
Botões de prioridade alta contêm as principais ações do app. Nesse tipo de botão, use cores primárias
ou secundárias para preencher o contêiner e
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 uso de uma cor menos contrastante no preenchimento. Eles representam ações menos importantes do que as principais. Use a cor da plataforma no contêiner e a cor da plataforma no conteúdo.
Se preferir, use o componente personalizado OutlinedButton para um botão de prioridade média. Ele tem um plano de fundo transparente, um traço colorido da variante de 60% de opacidade e conteúdo colorido principal.
Prioridade baixa (somente para figuras)
Os botões de prioridade baixa não têm preenchimento. Eles servem
para áreas menores no mostrador do relógio em que é necessário usar uma
disposição compacta. 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 os botões padrão para permitir que o usuário execute 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 marcar e desmarcar dias da semana ou pausar e reiniciar um timer.
Layouts adaptáveis
Comportamento responsivo
1 botão
O padding interno vai permanecer o mesmo, e as margens precisam ser porcentagens para evitar que os botões se estiquem demais e manter um tamanho relativo.
2 botões
Quando há dois botões, margens internas em porcentagem são adicionadas para evitar que os botões se estiquem demais e manter um tamanho relativo.
IMEs
1 ou 2 botões
Os IMEs com dois ou um único botão de bloqueio 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 são esticados. Em telas maiores, 225 dp ou mais, os botões se estendem 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 2025-07-27 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 2025-07-27 UTC."],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
