Global Buttons

Permitem que as pessoas tomem ação e façam escolhas com um toque.

EM ANDAMENTO

Histórico de Atualizações 📅

Dezembro

• 17/12/24

  Inclusão da documentação de Global Buttons

Visão Geral

🔗 Acessar componentes | Figma 🔗

1. Brand

   Onde a ação primeira tem correlação à marca.

2. Assistant

   Contextos de Assinaturas como Cifra Club Academy e Cifra Club Pro.

3. Neutral

   Contextos neutros que não correspondem as duas primeiras regras acima.

4. Neutral-reverse

   Contextos neutros que não correspondem as duas primeiras regras acima em versão inversa.

5. Clear

   Antigo ghost button, quando o contexto pede menor ênfase na ação.

6. Outline Neutral

   Contextos onde normalmente acompanham de outros botões preenchidos, ou quando não há necessidade de ênfase.

7. Outline Brand

   Aplicação com menor ênfase onde tem correlação com à marca.

Anatomia

🔗 Acessar componentes | Figma 🔗

1. Container

   Espaço que segura os objetos no interior.

2. Label

   [Opcional] Texto que descreve a ação do botão; pode existir ou não

3. Ícone

   [Opcional] Pode ser incluso na direita ou na esquerda; pode existir ou não.Para uso de Global Buttons sem label, é necessário manter o token borderRadius-small

Todos os botões possuem token de cores que se adaptarão ao dark mode respectivo. As aplicações estão no arquivo dos componentes, no Figma.

No Compasso atual não é permitido utilizar botões com radius full, ou seja - rendondo, mesmo que tenha apenas um ícone devemos respeitar o radius respectivo do tamanho do botão. Botões que possuem radius full são contextuais e são tratados como outros componentes, por exemplo o botão de Play que é completamente rendondo contendo apenas um ícone no meio.

Especificações

↳ Tamanhos

🔗 Acessar componentes | Figma 🔗

Atualmente seguimos com apenas 3 tamanhos de botões no Compasso, sendo eles:

1. 48px - Large

   Alta ênfase na hierarquia das informações da tela. Ex.: Call to Action buttons.

2. 40px - Médium

   Média ênfase na hierarquia das informações da tela.

3. 32px - Small

   Baixa ênfase na hierarquia das informações da tela.

Para larguras o tamanho é flexível, sendo variável dependendo da aplicação. Recomendado sempre o botão se adequar ao conteúdo onde está sendo aplicado.

↳ States

🔗 Acessar componentes | Figma 🔗

1. Enabled

   Estado padrão do botão quando está disponível para interação.

2. Hovered

   Visual do botão ao passar o cursor sobre ele, indicando interatividade.

3. Pressed

   Aparência do botão quando está sendo clicado, mostrando feedback imediato.

4. Disabled

   Estado do botão quando está desativado, indicando que não pode ser clicado/pressionado.

5. Loading Undetermined

   Visual do botão durante um processo de carregamento sem tempo específico para finalizar.

6. Loading Determined

   Estado do botão durante um carregamento com tempo estimado ou progresso visível.

7. Focused*

   Aparência do botão quando está focado através de navegação por teclado, destacando-se para acessibilidade. ⚠️ *Para o Focused especificamente a imagem acima é apenas representativa. Não temos um estilo definido no Compasso para este estado pois utilizaremos o padrão do navegador. Ver documentação sobre Acessibilidade →