Ir para o conteúdo principal

[SOLAR] Padronização dos estilos de botões do SOLAR

Objetivo

Estudo com objetivo de definir padrões de estilo dos botões de acordo com o contexto em que se encontram e quando devem ser utilizados.

Posição

Em geral os botões seguem um padrão de leitura da esquerda para a direita, desta forma botões que executam uma ação principal devem ser alinhados a direita do componente em que se encontra, em contraste botões de ação secundaria se alinham ao lado esquerdo.

Cor

O sistema segue a paleta de cor do template visual Admin pro, em conjunto com o padrão de cores definidos pelo framework Bootstrap

Botão em view

RelativoGuia de estilo relativo a botões localizados na área geral de uma view.

Posição

Por padrão de leitura botões que executam uma ação relativa ao processo devem ser alinhados ao canto superior direito, em contraste botões de retorno se alinham ao canto superior esquerdo.

Cor

Botões 

Ícone
Preenchimento
Borda
Exemplo Visual
Snippet de código
Botão dentro de modal


Posição
Cor
Ícone
Preenchimento
Borda
Exemplo Visual
Snippet de código
Botão em card


Posição
Cor
Ícone
Preenchimento
Borda
Exemplo Visual
Snippet de código
Botão no item do card


Posição
Cor
Ícone
Preenchimento
Borda
Exemplo Visual
Snippet de código