Referência:
https://www.gov.br/ds/components/button?tab=designer
https://www.gov.br/ds/components/button?tab=desenvolvedor
Os botões são elementos interativos da interface, que permitem que os usuários acessem funcionalidades, executem ações ou naveguem pela interface.
Exemplo de botões disponíveis no Design System
Utilize botões quando for necessário realizar ações contendo as seguintes características:
Importante: Os botões devem ser usados conforme a necessidade de interação do usuário com a interface. Também é necessário definir o grau de importância e hierarquia das ações através do uso correto dos tipos de botões.
ID | Nome | Referência | Uso |
---|---|---|---|
1 | Ícone | Fundamento Iconografia | Opcional |
2 | Rótulo | Fundamento Tipografia | Obrigatório |
3 | Superfície | Fundamento Superfície | Obrigatório |
O ícone no botão do tipo padrão é um elemento opcional e deve ser usado quando houver uma necessidade de enfatizar visualmente a ideia da ação.
Nos botões do tipo circular a utilização é obrigatória, visto que a mensagem da ação é transmitida apenas pelo ícone.
O rótulo é um elemento obrigatório. A exceção ocorre na versão tipo circular uma vez que não existe rótulo.
Naturalmente as palavras usadas nos rótulos variam bastante de tamanho. O ideal é que seja utilizado apenas uma ou duas palavras no máximo. Deve-se evitar usar três ou mais palavras no rótulo. Nunca utilize quebra de linhas no rótulo_do botão.
Importante: o crescimento do botão deve acompanhar o tamanho do rótulo, porém as margens internas devem ser respeitadas.
Quando houver a necessidade da criação de um botão, é esperado que este informe qual a sua ação, reduzindo ao máximo falsas expectativas e dúvidas aos usuários.
Recomenda-se, sempre que possível, a utilização de verbos de ação no infinitivo.
Ex.: “Entrar” , “Cancelar”, “Cadastrar”, “Anexar”, etc.
A Superfície é um elemento obrigatório e tem aparência distinta dependendo do tipo utilizado.
Em algumas situações, a superfície pode ter a opacidade de 0%, desta forma permite-se preservar a área de proteção do botão, assim como a área de touch.
Existem 2 tipos de botões no Design System: Botão Padrão e o Botão Circular.
É o tipo mais comum de botão, onde a ação é comunicada ao usuário através do rótulo do botão. Neste tipo pode-se utilizar os ícones para dar maior clareza à ação transmitida ao usuário.
Podem servir para pequenas ações auxiliares dentro da interface até ações de maior importância. O objetivo pode ser bem diverso. Geralmente este tipo de botão é muito usado dentro de outros componentes ou em situações onde a representação do ícone é suficiente para transmitir a mensagem ao usuário.
É utilizada em botões que possuem maior importância ou prioridade. Utilizados com maior frequência, devem ser aplicados em ações cruciais da tela, informando ao usuário sua importância.
Por exemplo, em um formulário quando houver a ação “salvar” e “cancelar”, espera-se que após preencher os campos, o usuário deseje salvar suas alterações, sendo assim, a cor do botão salvar deve se destacar da cor do botão cancelar (que é a ação menos esperada).
Utilize de forma limitada. Somente em ações estratégicas, voltadas para o objetivo principal de uma tela.
É utilizada nos botões com importância intermediária. É usada para dar uma importância menor que os botões de ênfase primária. Aparecem muitas vezes ao lado dos botões de ênfase primária, porém as ações a que se destinam realizar são menos esperadas de serem acessadas pelo usuário do que as ações representadas pelos botões de ênfase primária.
Utilize para ações que não sejam voltadas para o objetivo principal de uma página.
É usada em botões de baixa importância.
Utilize para ações de múltiplas escolha, opcionais e de suporte.
Os botões padrões podem utilizar o comportamento bloco para alterar sua largura, ocupando todo o espaço disponível na superfície (seja dentro de um outro componente ou de um determinado lugar da grid).
Neste comportamento, o botão “empurra” qualquer outro elemento existente para outro espaço disponível.
Em dispositivos por toque, seu uso é altamente recomendado por facilitar o acesso aos botões importantes da interface.
Atenção:
Somente os botões tipo padrão possuem esse comportamento,
Pode ser utilizado em outros tipos de grid, porém, de forma cautelosa.
Pode ser utilizado em conjunto com qualquer tipo de densidade ou ênfase.
Pode existir, na mesma tela, botões sem ou com o comportamento bloco.
Abaixo, exemplos de possibilidades de uso desse comportamento (mas não necessariamente boas práticas de uso).
Para dar maior flexibilidade à composição de tela ou até mesmo refinar o “peso” visual dos botões na tela, é utilizado o recurso da densidade nos botões. O ajuste da densidade consiste em aumentar ou reduzir os espaçamentos internos do botão de forma a deixá-los mais compactos ou mais expandidos em seu formato.
Para isto, o Design System utiliza três níveis de densidade:
Densidade baixa: O botão tem sua altura aumentada.
Densidade padrão: É a forma padrão do componente button.
Densidade alta: O botão tem sua altura reduzida.
Importante: é importante observar que o rótulo do botão e o ícone permanecem sempre centralizados tanto na largura quanto na altura, e seus tamanhos inalterados. Também permanece inalterado o espaçamento entre o rótulo e o ícone.
Nos botões de tipo circular ocorre o incremento na altura e largura do botão de densidade baixa e redução na altura e largura do botão de densidade alta.
Tendo em vista a utilização das diferentes ênfases nos botões com o intuito de manter uma hierarquia visual na interface, é necessário posicioná-los de forma coerente em relação ao grau de importância de cada uma dessas ênfases.
Deve-se seguir o seguinte princípio: a ênfase de maior relevância deverá vir sempre à direita.
Por exemplo, quando três botões com ênfases diferentes forem utilizados juntos, o botão com ênfase primária será posicionado à direita e em sequência o de ênfase secundária e terciária
O mesmo ocorre quando houver apenas o botão de ênfase primária e o de ênfase secundária juntos
Quando estiverem juntos apenas o botão de ênfase secundária e o de ênfase terciária, o de ênfase secundária será posicionado à direita
Com os botões de ênfase primária e terciária segue-se o mesmo princípio
Quando a disposição da tela permitir que os botões apareçam posicionados verticalmente, o botão mais relevante virá posicionado mais abaixo.
O comportamento toggle permite a alternância dos rótulos e/ou ícones internos ao botão, de forma a transmitir ações opostas ou vinculadas entre si.
Neste comportamento, após o clique do usuário no botão, o rótulo ou ícone alterna para a ação oposta. Ao ser efetuado um novo clique no mesmo botão, o rótulo ou ícone alterna para ação inicial, e assim por diante.
É um comportamento opcional. O componente loading aparece apenas quando o botão se encontra no estado progress. Esta situação ocorre quando existe a necessidade de mostrar ao usuário o progresso da requisição dentro do próprio botão após a interação.
Quando o botão estiver próximo a algum outro componente, mantenha um espaçamento mínimo para que ele seja notado na tela e que sua área de interação não se confunda com as de outros componentes.
Utilize algum espaçamento da escala de layout, listado no Fundamento Espaçamento, de forma consistente ao longo de sua interface.
Os estados dos botões são úteis para dar feedback ao usuário sobre as ações que ocorrem quando houver uma interação com o botão. Abaixo listamos os estados do componente button e suas características em fundo claro e escuro:
Muito utilizado quando a tela demora um pouco para exibir os dados. Importante para dar feedback ao usuário sobre o que está acontecendo
Name | Size | Weight | Text-transform |
---|---|---|---|
Rótulo (Padrão) | --font-size-scale-up-01 |
--font-weight-semi-bold |
none |
Name | Size |
---|---|
Ícone (Padrão) | --icon-size-base |
Ícone (Circular) | --icon-size-base |
Name | Property | Color Token | Opacidade |
---|---|---|---|
Ícone, Rótulo (Primária) | text color | --pure-0 |
- |
Ícone, Rótulo (Primária - Fundo Escuro) | text color | --blue-warm-vivid-90 |
- |
Ícone, Rótulo (Secundária) | text color | --blue-warm-vivid-70 |
- |
Ícone, Rótulo (Secundária - Fundo Escuro) | text color | --blue-warm-vivid-20 |
- |
Ícone, Rótulo (Terciária) | text color | --blue-warm-vivid-70 |
- |
Ícone, Rótulo (Terciária - Fundo Escuro) | text color | --blue-warm-vivid-20 |
- |
Superfície (Primária) | background color | --blue-warm-vivid-70 |
- |
Superfície (Primária - Fundo Escuro) | background color | --blue-warm-vivid-20 |
- |
Superfície (Secundária) | background color | --pure-0 |
- |
Superfície (Secundária - Fundo Escuro) | background color | --blue-warm-vivid-90 |
- |
Superfície (Terciária) | - | - | 0% |
Superfície (Secundária) | border color | --blue-warm-vivid-70 |
- |
Superfície (Secundária- Fundo Escuro) | border color | --blue-warm-vivid-20 |
Name | Height | Width |
---|---|---|
Superfície (Padrão - Densidade Baixa) | 48px |
variável |
Superfície (Padrão - Densidade Padrão) | 40px |
variável |
Superfície (Padrão - Densidade Alta) | 32px |
variável |
Superfície (Circular - Densidade Baixa) | 48px |
48px |
Superfície (Circular - Densidade Padrão) | 40px |
40px |
Superfície (Circular - Densidade Alta) | 32px |
32px |
Name | Property | Spacing Token |
---|---|---|
Ícone | margin-right | --spacing-scale-base |
Superfície | padding-right, padding-left | --spacing-scale-3x |
Name | Property | Value |
---|---|---|
Superfície (Padrão) | border-radius | --surface-rounder-pill |