C1 · Componentes

Button

Componente de ação primário. Cinco variantes, três tamanhos, seis estados. Cada botão dispara uma ação inequívoca — nunca representa navegação ou status.

Variantes

Cinco variantes hierárquicas. Em qualquer tela, no máximo uma primary e uma secondary.

Variante	Uso	Cor
Primary	Ação dominante da tela (ex: 'Entrar na live').	Tinta sobre papel.
Secondary	Ação principal contextual (ex: 'Salvar drop').	Verde-IA sobre papel.
Outline	Ação alternativa, complementar.	Borda tinta, fundo transparente.
Link	Ação inline em fluxo de texto.	Cor de acento, sem fundo.
Destructive	Exclusão, cancelamento, reversão.	Vermelho semântico.

Tamanhos

Três tamanhos canônicos.

Tamanho	Padding	Font-size	Altura	Onde usar
sm	8px 16px	1.2rem	32px	Tabelas densas, ações secundárias inline.
md (padrão)	12px 20px	1.4rem	40px	Padrão para a maioria dos contextos.
lg	16px 24px	1.6rem	48px	CTAs em hero, landing, capas.

Estados

Estado	Mudança visual	Acessibilidade
default	Cor base.	—
hover	Tonalidade -10% (ex: hover do accent → #008C7A).	Visual apenas.
focus	Outline 3px na cor de acento, offset 2px.	Sempre visível ao tabular.
pressed	Escala 0.98, cor -20%.	Feedback tátil instantâneo.
disabled	Opacidade 0.5, cursor not-allowed.	Use `aria-disabled` se foco precisa permanecer.
loading	Texto + spinner; clique bloqueado.	`aria-busy='true'`.

Implementação

/* Estrutura mínima */
<button class="btn-primary" type="button">
  <svg aria-hidden="true" ... />
  Entrar na live
</button>

/* Loading */
<button class="btn-primary" aria-busy="true" disabled>
  <span class="spinner" /> Carregando...
</button>

Faça e não faça

Faça

Use sempre type='button' exceto em formulários (default é submit).
Inclua ícone à esquerda do label quando ele esclarece a ação.
Mantenha labels em verbos imperativos: 'Salvar', 'Enviar', 'Cancelar'.

Não faça

Não use mais de uma primary visível na mesma viewport.
Não use só ícone sem aria-label.
Não troque a cor do botão para criar 'estado de sucesso' — use feedback no contexto vizinho.

Acessibilidade

Foco visível com outline ≥ 3px.
Contraste mínimo 4.5:1 entre texto e fundo (AA).
Tap target ≥ 44x44px em touch.
disabled remove do tab order; aria-disabled mantém mas anuncia o estado.
Estado de loading anunciado via aria-busy + texto auxiliar.