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 →

Atualizado