Modo escuro

Botões

Utilize Botões para desencadear ações específicas ou comandos dentro da interface. Este componente é fundamental para a navegação e a interação do utilizador com a aplicação ou o site.

Características Principais

Ação Clara

Indica de forma explícita a ação que será realizada quando o botão for clicado.

Feedback Imediato

Fornece respostas visuais ou auditivas instantâneas para confirmar que a ação foi recebida.

Estilos Diferenciados

Pode ser estilizado de diversas formas para indicar diferentes tipos de ações (primárias, secundárias).

Exemplo de Utilização
  • Enviar formulários
  • Navegação entre páginas ou secções
  • Iniciar ou parar processos

Incorpore Botões sempre que desejar proporcionar uma maneira clara e direta para os utilizadores interagirem com a interface, garantindo uma experiência de utilizador intuitiva e eficiente.

Atribuir um peso e importância nos botões ajuda a informar o utilizador, a hierarquia e prioridade que cada ação tem. Pode também ser útil em situações onde existem muitos botões e não há outra forma de resolver o layout.

Primários

Botão Primário (Primary Button): Usado para a ação principal numa página ou diálogo. Deve ser o mais proeminente e geralmente utiliza a cor principal do tema do design.

Texto

                                                
<button type="button" class="gra-btn btn-primary">Primário</button>
<button type="button" class="gra-btn btn-primary btn-primary-accessibility">Acessibilidade</button>
<button type="button" class="gra-btn btn-primary btn-primary-deactivated disabled">Desativado</button>
<button type="button" class="gra-btn btn-primary-error">Erro</button>

Icon + Texto

                                                
<button type="button" class="gra-btn btn-primary gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Primário
</button>
<button type="button" class="gra-btn btn-primary btn-primary-accessibility gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Acessibilidade
</button>
<button type="button" class="gra-btn btn-primary btn-primary-deactivated disabled gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Desativado
</button>
<button type="button" class="gra-btn btn-primary-error gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Erro
</button>

Texto + Icon

                                                
<button type="button" class="gra-btn btn-primary gra-margin-right-xs">
    Primário<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary btn-primary-accessibility gra-margin-right-xs">
    Acessibilidade<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary btn-primary-deactivated disabled gra-margin-right-xs">
    Desativado<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary-error gra-margin-right-xs">
    Erro<i class="icon-chevron-right iconRight"></i>
</button>

Icon + Texto + Icon

                                                
<button type="button" class="gra-btn btn-primary gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Primário<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary btn-primary-accessibility gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Acessibilidade<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary btn-primary-deactivated disabled gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Desativado<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-primary-error gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Erro<i class="icon-chevron-right iconRight"></i>
</button>

Icon

                                                
<button type="button" class="icon icon-primary gra-margin-right-xs">
    <i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="icon icon-primary icon-primary-accessibility gra-margin-right-xs">
    <i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="icon icon-primary icon-primary-deactivated gra-margin-right-xs disabled" disabled>
    <i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="icon icon-primary-error">
    <i class="icon-chevron-right iconRight"></i>
</button>

Secundários

Botão Secundário (Secondary Button): Usado para ações secundárias que complementam a ação principal. Menos proeminente que o botão primário, mas ainda importante.

Texto

                                                
        <button type="button" class="gra-btn btn-secondary gra-margin-right-xs">Secundário</button>
        <button type="button" class="gra-btn btn-secondary btn-secondary btn-secondary-deactivated gra-margin-right-xs disabled">Desativado</button>
        <button type="button" class="gra-btn btn-secondary btn-secondary-error">Erro</button>

Icon + Texto

                                                
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Secundário
</button>
<button type="button" class="gra-btn btn-secondary btn-secondary-deactivated gra-margin-right-xs disabled">
    <i class="icon-chevron-left iconLeft"></i>Desativado
</button>
<button type="button" class="gra-btn btn-secondary-error">
    <i class="icon-chevron-left iconLeft"></i>Erro
</button>

Texto + Icon

                                                
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs">
    Secundário<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-secondary btn-secondary-deactivated gra-margin-right-xs disabled">
    Desativado<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-secondary-error">
    Erro<i class="icon-chevron-right iconRight"></i>
</button>

Icon + Texto + Icon

                                                
<button type="button" class="gra-btn btn-secondary gra-margin-right-xs">
    <i class="icon-chevron-left iconLeft"></i>Secundário<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-secondary btn-secondary-deactivated gra-margin-right-xs disabled">
    <i class="icon-chevron-left iconLeft"></i>Desativado<i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="gra-btn btn-secondary-error">
    <i class="icon-chevron-left iconLeft"></i>Erro<i class="icon-chevron-right iconRight"></i>
</button>

Icon

                                                
<button type="button" class="icon icon-secondary gra-margin-right-xs">
    <i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="icon icon-secondary icon-secondary-deactivated gra-margin-right-xs disabled" disabled>
    <i class="icon-chevron-right iconRight"></i>
</button>
<button type="button" class="icon icon-secondary-error">
    <i class="icon-chevron-right iconRight"></i>
</button>