Table of Contents

1. Tipos de botões
2. Inverted buttons
3. Variações de tamanho
4. Posicionamento e herarquia
5. Espaçamentos
6. Responsividade e adaptabilidade
7. Rótulos

O que é

Botões são elementos clicáveis que permitem a pessoa usuária acionar ações pela interface. Eles geralmente são colocados em toda a interface do usuário, em locais como: formulários, modais, cards, barras de ferramentas, etc.

Tipos de botões

Primary button

<button type="button" class="button is-primary">Primary</button>
<button type="button" class="button is-primary is-hovered">Primary (hovered)</button>
<button type="button" class="button is-primary" disabled>Primary (disabled)</button>
<button type="button" class="button is-primary is-loading">Primary</button>

São botões de ênfase alta. São utilizados para indicar aos usuários todas as ações que queremos que ele faça.

Um layout deve conter um único botão destacado que deixe claro que outros botões têm menos importância na hierarquia. Coloque uma ação afirmativa para chamar atenção do usuário para uma página. Ex.: “Ir para tela inicial”, “Avançar”.

Danger button

<button type="button" class="button is-danger">Danger</button>
<button type="button" class="button is-danger is-hovered">Danger (hovered)</button>
<button type="button" class="button is-danger" disabled>Danger (disabled)</button>
<button type="button" class="button is-danger is-loading">Danger</button>

É uma variação do botão primário. São usados quando a ação é perigosa para os dados da pessoa usuária, como ações que não podem ser desfeitas. Ex.: “Excluir conta” ou “Excluir contatos”.

Os botões danger são acompanhados por botões secundários. Jamais são acompanhados de outros botões primários.

Secondary button

<button type="button" class="button">Default</button>
<button type="button" class="button is-hovered">Default (hovered)</button>
<button type="button" class="button" disabled>Default (disabled)</button>
<button type="button" class="button is-loading">Default</button>

São botões de ênfase média. São utilizados quando queremos mostrar duas ações, mas a primeira delas é a ação principal (Primary button).

Utilize uma ação de rejeição para fazer com que o usuário retorne a uma página. Ex.: “Voltar”, “Voltar para pagamento”, “Cancelar edição”.

Tertiary button

<button type="button" class="button is-tertiary">Tertiary</button>
<button type="button" class="button is-tertiary is-hovered">Tertiary (hovered)</button>
<button type="button" class="button is-tertiary" disabled>Tertiary (disabled)</button>
<button type="button" class="button is-tertiary is-loading">Tertiary</button>

São botões de ênfase baixa e não possuem preenchimento no fundo, ou seja, são ghost buttons. São menos proeminentes em relação aos botões primário (Primary button) e secundário (Secondary button). São equivalentes aos botões de texto (Button text), mas podem estar a um pequeno passo acima na hierarquia.

Botões terciários (tertiary buttons) podem ser usados lado a lado. Também funcionam ao lado de títulos H1, nos Page headers.

Button text

<button type="button" class="button is-text">
  Text button 
  <i class="fak fa-grid-small"></i>
</button>
<button type="button" class="button is-text">Text button (no icon)</button>
<button type="button" class="button is-text is-hovered">Text button (hovered)</button>
<button type="button" class="button is-text" disabled>Text button (disabled)</button>

São botões de ênfase baixa que ajudam a destacar o conteúdo. Geralmente são utilizados quando o usuário deseja ir para um elemento na mesma página, como abrir uma modal.

Button link

<button type="button" class="button is-link">
  <a>
    <span>Button link</span>
    <span class="icon is-small">
      <i class="far fa-angle-right"></i>
    </span>
  </a>
</button>

<button type="button" class="button is-link">
  <a class="is-hovered">
    <span>Button link (hovered)</span>
    <span class="icon is-small">
      <i class="far fa-angle-right"></i>
    </span>
  </a>
</button>

São botões de enfase baixa. Evitamos o uso de links inseridos dentro de texto corrido. O botão link (Button Link) é usado para links externos e é alinhado à esquerda do parágrafo.

Icon button

<button class="button is-icon" aria-haspopup="true">
  <span class="icon is-medium">
    <i class="fak fa-options-medium" aria-hidden="true"></i>
  </span>
</button>

<button class="button is-icon is-hovered" aria-haspopup="true">
  <span class="icon is-medium">
    <i class="fak fa-options-medium" aria-hidden="true"></i>
  </span>
</button>

São botões de ênfase baixa. O botão de ícone (Icon Button) é utilizado quando queremos disponibilizar opções para o usuário em uma lista. Caso haja outros botões, deve estar localizado à direita.

Voltar ao topo

Inverted buttons

<button type="button" class="button is-tertiary is-inverted">Tertiary inverted</button>
<button type="button" class="button is-text is-inverted">
  Text button Inverted 
  <i class="fak fa-grid-small"></i>
</button>
<button type="button" class="button is-link is-inverted">
  <a>
    <span>Button link</span>
    <span class="icon is-small">
      <i class="far fa-angle-right"></i>
    </span>
  </a>
</button>

Variante utilizada para fundos escuros

Voltar ao topo

Variações de tamanho

As alturas e larguras são definidas de acordo com o tipo de dispositivo. As larguras mínimas já vem setadas no CSS do Sirius.

Variante	Largura mínima desktop	Largura mínima mobile
Primary button	n.º de caracteres define	64px
Danger button	n.º de caracteres define	64px
Secondary button	n.º de caracteres define	64px
Tertiary button	n.º de caracteres define	64px
Button text	n.º de caracteres define	64px
Button link	n.º de caracteres define	n.º de caracteres define

---

Recomendamos que as variações desktop do Primary button, Danger button e Secondary button não ultrapassem a largura máxima de 312px.

Voltar ao topo

Aplicação

Posicionamento e hierarquia

O botão primário (Primary Button) deve sempre ficar à direita de outros botões e no final do conteúdo que ele se refere, uma vez que ele deve passar a sensação de avançar e seguir o fluxo de leitura da pessoa usuária.

• Um layout deve ter apenas um botão primário destacado que deixe claro que outros botões têm menos relevância na hierarquia.
• Nem toda tela precisa conter um botão primário
• Em page headers ou ao lado de text fields (como a busca), os botões devem ter ênfase baixa (Tertiary button, Button text ou Button link). Ex.: “Adicionar usuário”, “Novo fluxo”

Variante	Hierarquia
Primary button	Ênfase alta. Ação principal de uma página
Danger button	Ênfase alta. Ação destrutiva
Secondary button	Ênfase média. Ação secundária de uma página, se encontra lado a lado do primário
Tertiary button	Ênfase baixa. Ação terciária de uma página
Button text	Ênfase baixa. Ação terciária de uma página
Button link	Ênfase baixa. Ação terciária de uma página

---

Voltar ao topo

Espaçamentos

Quando os botões primário e secundário são apresentados ao fim da página, recomendamos o uso do espaçamento de 40px abaixo do parágrafo ou dos componentes usados.

Atualmente o espaçamento entre botões primário e secundário é 4px.

Voltar ao topo

Responsividade e adaptabilidade

Os botões do Sirius são aplicados com o mesmo código para as versões desktop e mobile. Em resoluções menores que Desktop (1024px), os botões primário, secundário e terciário permanecem em sua versão Mobile. Em resoluções maiores são renderizadas as versões Desktop dos mesmos. Saiba mais na documentação do Bulma, framework que o Sirius utiliza como base.

Responsividade no Bulma >

Exemplos

Abaixo, alguns exemplos de aplicação dos botões.

Voltar ao topo

Rótulos

Os rótulos dos botões devem descrever sua ação de forma resumida. Abaixo listamos o que fazer e o que não fazer ao aplicar os rótulos.

Do

Utilize letra maiúscula no inicio da frase, o restante fica em letras minúsculas (exceto nomes próprios e nomes de produtos ou funcionalidades). Saiba mais em nosso Guia de Redação, no bloco Gramática e outros padrões.

Acessar Guia de Redação >

Don't

Evite rótulos de Sim/Não, Clique aqui e OK. Para modais, faça o exercício de imaginá-la sem o texto auxiliar e pensar em rótulos que permitam que o usuário prossiga sem essas informações.

Use labels que deixem claro qual ação ocorrerá ao clicar no botão. Prefira sempre utilizar um verbo de ação no infinitivo e um substantivo. Ex.: ”Acessar {nome do produto}” ou ”Voltar para {nome da funcionalidade}”.

Don't

Não utilize all caps nos rótulos.

Do

Recomendamos o uso de ”Excluir”, ”Remover” e ”Mover para a lixeira”, dependendo do contexto. Veja abaixo as premissas de cada rótulo:

Excluir - exclusão permanente, sem possibilidade de recuperação. Mover para lixeira - o arquivo é movido para a lixeira, onde pode ser recuperado ou excluído permanentemente, se a pessoa usuária desejar. O termo ”Remover” pode ser usado para o caso de ser uma ação reversível, como uma movimentação. Ele é menos usado nas interfaces da Zenvia.

Se o caso em que está trabalhando for muito específico, procure o time de UX Content para definirem o rótulo em conjunto.

Don't

Não recomendamos o uso do termo ”Deletar”. Essa não é uma palavra nativa da língua portuguesa e possui o mesmo significado que ”Excluir”. Para manter a padronização do texto, optamos por utilizar ”Excluir”.