Windows Dev Center

Diretrizes de botões

Um botão oferece ao usuário um modo de acionar uma ação imediata.

Exemplo de botões

Exemplo

Exemplo de botões, usados em uma caixa de diálogo

Este é o controle correto?

Um botão permite que o usuário inicie uma ação imediata, como enviar um formulário.

Não use um botão quando a ação for navegar para outra página; em vez disso, use um link. Exceção: Para navegação no assistente, use os botões "Voltar" e "Avançar". Para outros tipos de navegação para trás ou navegação para um nível superior, use um botão Voltar.

Recomendações

  • Certifique-se de que a finalidade e o estado de um botão estejam claros para o usuário.
  • Utilize um texto conciso, específico e autoexplicativo que descreva claramente a ação executada pelo botão. Geralmente, o conteúdo de texto do botão é uma única palavra, um verbo.
  • Se o conteúdo em texto de um botão for dinâmico, por exemplo, estiver localizado, considere como o botão redimensionará e o que acontecerá para controles em volta dele.
  • Para botões de comando com conteúdo de texto, use a largura mínima do botão.
  • Não use botões estreitos, baixos ou altos com conteúdos em texto.
  • Use a fonte padrão a menos que suas diretrizes de marca digam para usar algo diferente.
  • Para uma ação que precise ser avaliada em múltiplas páginas em seu aplicativo, em vez de duplicar um botão em múltiplas páginas, considere usar uma barra inferior do aplicativo.
  • Exponha somente um ou dois botões por vez ao usuário, por exemplo, Aceitar e Cancelar. Se você precisar expor mais ações ao usuário, considere usar caixas de seleção ou botões de opção onde o usuário possa selecionar ações, com um único botão de comando para acionar essas ações.
  • Use o botão de comando padrão para indicar a ação mais comum ou recomendada.
  • Considere personalizar seus botões. A forma de um botão é retangular por padrão, mas você pode personalizar seus elementos visuais para criar a aparência do botão. O conteúdo de um botão costuma ser texto — por exemplo, Aceitar ou Cancelar — mas você pode substituir o texto por um ícone ou usar um ícone mais texto.
  • Certifique-se de que conforme o usuário interaja com o botão, o botão mude de estado e aparência para fornecer um comentário ao usuário. Normal, pressionado e desativado são exemplos de estados do botão.
  • Acione os botões quando o usuário tocar ou pressionar o botão. Normalmente, o botão é acionado quando o usuário libera o botão, mas também pode definir o acionamento de um botão quando um dedo pressioná-lo.
  • Não use um botão de comando para definir um estado.
  • Não altere o texto do botão enquanto o aplicativo estiver em execução. Por exemplo, não altere o texto de um botão "Avançar" para "Continuar".
  • Não altere os estilos padrão de enviar, redefinir e botão.
  • Não coloque conteúdo em excesso dentro de um botão. Crie um conteúdo conciso e fácil de ser entendido (nada além de uma imagem e algum texto).

Diretriz de uso adicional

Escolhendo o tipo correto de botão (somente JavaScript e HTML)

Há três tipos de controles de HTML button: submit, reset e button. Siga estas orientações para escolher o tipo ideal:

  • Enviar

    Envie uma entrada de usuário ao servidor ou execute uma ação, como salvar dados de formulário e ir para a próxima página.

  • Redefinir

    Limpe o formulário ou página da entrada do usuário.

  • Botão

    Crie um comando ou ação personalizados.

    Dentro de um formulário, um button sem nenhum atributo age como um submit, se for o primeiro button dentro do formulário.

Tópicos relacionados

Para designers
Diretrizes de botões
Diretrizes de botões de opção
Diretrizes de botões de alternância
Diretrizes de caixas de seleção
Diretrizes do controle de seleção
Para desenvolvedores (HTML)
button
input type=button
input type=submit
Para desenvolvedores (XAML)
Button class

 

 

Mostrar:
© 2015 Microsoft