Botões nada mais são que links destacados. Estão localizados em pontos estratégicos da tela e, uma vez clicados, levam a outras telas ou efetuam algum tipo de ação na própria tela.

No Pucomex estão previstos 3 tipos de botões, que são diferenciados pela cor:

botões primários (azul);
botões secundários (transparente);
botões de formulários (cinza).

Cada um deles tem uma função específica e bem definida.

Os botões primários são aqueles que sugerem a ação principal da tela, seguem o fluxo natural esperado pelo usuário. Estes botões estão destacados de azul. Cada tela só deve possuir um único botão primário (salvas raras exceções) e se houver apenas um botão na tela, este deverá ser do tipo primário, pois se só houver uma possibilidade de ação, subentende-se que esta ação é a principal.

Os botões secundários têm menos relevância que os primários e por isso são do tipo "ghost button", isto é, transparentes, tendo apenas cor no contorno e no texto. Podem ocorrer quantos botões secundários forem necessários e devem estar sempre à direita do primário.

Os botões de formulários são cinza, têm funções muito restritas como realizar uma ação de um elemento de formulário. Eles devem estar localizados juntos ao item de formulário aos quais se referem e suas dimensões são proporcionais aos mesmos. Seu posicionamento pode variar entre ao lado ou abaixo do componente ao qual está associado de acordo com a diagramação da tela e o melhor aproveitamento do espaço. Esses botões jamais assumem uma função de fluxo de navegação.

b.1) Dimensões:                    

            Altura dos botões: 35px

            Largura mínima dos botões: 104px

            Distância entre botões: 20px

b.2) Cores:
          (em caso de dúvida, consulte a legenda de cores no item 2.2 deste guia)

            Botão primário: 2

            Botão secundário: transparente

            Botão formulário: 4

b.3) Textos:

           Texto botão: OSr/14 (8)

            Texto botão secundário: 1

Cada botão tem seu estado hover (ação de passar o ponteiro do mouse sobre o botão) e desabilitado. Abaixo, seguem as especificações necessárias:

c.1) Cores:
          (em caso de dúvida, consulte a legenda de cores no item 2.2 deste guia)

            Botão primário hover: #036793

            Botão primário: desabilitado: #67b0d0

            Botão secundário hover: 1

            Botão secundário desabilitado: transparente

            Botão formulário hover: #4c4d4f

            Botão formulário desabilitado: #9b9b9d

c.2) Textos:

             Texto botão secundário hover: 8

            Texto botão secundário desabilitado: 5           

Há ainda botões de Avançar e Retornar (para os Wizards) e a previsão de botões com ícones (somente em botões de formulários).

 Os textos dos botões (labels) devem ser curtos e diretos. Orientamos a utilização de verbos no infinitivos que representem de forma direta a ação do botão. Se necessário for, uma segunda palavra de apoio pode ser utilizada a fim de deixar a ação mais clara.

Exemplo: Se apenas "Limpar" não deixar claro que tipo de informação o usuário estará limpando, pode-se utilizar o label: "Limpar Dados".

Quanto ao posicionamento, os botões devem estar alinhados ao centro da tela e o primário sempre à esquerda dos secundários.

A distância entre os botões deve ser 20px. A exceção são os botões de Wizard (Avançar e Retornar) em que o primeiro fica alinhado à direita da tela e o segundo alinhado à esquerda da tela.