Ir para o conteúdo principal

Botões

Uso:

Os botões devem ser utilizados quando se quer comunicar ações como por exemplo, criar, salvar, exportar, excluir, etc. Os resultados dessas ações quase sempre serão mostrados na mesma página. Algumas situações comuns em que você pode utilizar botões:

  • Para enviar um formulário.
  • Para iniciar uma nova tarefa.
  • Para navegar entre passos de um formulário.
  • Para editar, excluir ou visualizar um item.

Tipos de Botões:

Cada tipo de botão está associado a um propósito e a um nível de ênfase.

Botões Primários:

O botão primário deve ser utilizado para a ação principal da página. Ele terá o nível mais alto de ênfase, ficando visualmente destacado para o usuário. Recomendamos utilizar apenas um botão primário por página.

image.png

Botões Secundários ou Default:

O botão secundário, deve ser utilizado quando a ação for menos importante que a principal. É comum seu uso em situações em que é oferecida uma opção alternativa à principal e para a qual se quer dar menos ênfase. Eles também podem ser usados para iniciar funções nos sistemas e recursos.

image.png

Botões de Atenção:

Este tipo de botão deve ser utilizado quando a ação for crítica, como botões que desativam dados.

image.png

Botões de Sucesso:

Deve ser utilizado para salvar ou finalizar ações das funções do sistema.

image.png

Botões com Ícones:

Os botões com ícones podem ser utilizados quando se deseja reforçar visualmente a ação. Devem ser aplicados preferencialmente em botões primários e posicionados à esquerda do label. Utilize o ícone à direita quando a ação estiver relacionada a progresso, como por exemplo, avançar e próximo. Para os botões default os icones podem ser coloridos (no caso do illi), já para os botões primários e de atenção as cores dos ícones devem ser as mesmas das fontes, normalmente de cor branca.

Títulos dos Botões

Os títulos dos botões devem indicar suas ações ou funções que ele irá iniciar.

image.png

Links: Acesse documentação Sencha / Acessar documentação Ionic / Acessar documentação Quasar

Os exemplos e orientações a seguir foram criados baseados na arquitetura do illi usando extJS 4. Porém, podem ser replicados e adaptados para desenvolver outros sistemas usando diferentes tecnologias, se for propício ao contexto.