primary
A única ação principal da tela. Preenchida e marcante para que o olhar caia nela primeiro.
Evite: duas primárias brigando numa mesma tela.
Use isto quando um único componente é entregue em várias variantes e tamanhos, e o leitor precisa vê-los lado a lado e aprender qual usar em cada caso.
Modelo copiável. Leve os blocos <section> abaixo para uma lição construída a partir de assets/lesson-template.html — mantenha os design tokens e o padrão .tech-toggle exatamente como estão.
Um Botão é um único componente, mas veste roupas diferentes. Um botão preenchido e marcante grita "faça isto"; um discreto com contorno diz "talvez isto"; um botão de texto quase imperceptível sussurra "ou isto"; e um vermelho avisa "cuidado". Além disso, cada um vem em três tamanhos. A matriz abaixo dispõe todas as roupas de uma só vez para que você possa compará-las e escolher a certa de propósito — não por acidente.
Pense assim… placas de trânsito. A mesma forma de placa carrega significados diferentes pela cor e pelo tamanho: um grande PARE vermelho, um modesto "dê a preferência", um pequeno aviso. Você lê a intenção num relance — e você nunca pintaria uma placa de PARE de verde.
O Botão recebe duas props ortogonais: variant (primary | secondary | ghost | danger) controla cor/ênfase, e size (sm | md | lg) controla o padding e o font-size. Elas se compõem: qualquer variante funciona em qualquer tamanho, dando uma grade 4×3 a partir de um único conjunto de classes CSS. Manter os eixos independentes é o que permite que um design system continue pequeno — você escreve 4 + 3 = 7 regras, não 12 botões sob medida.
Exatamente um primary por tela é a regra de bolso: a ênfase só se lê como ênfase quando é escassa. danger nunca depende só do vermelho (ele carrega um verbo como "Excluir" e, idealmente, uma etapa de confirmação). Toda variante mantém um anel :focus-visible visível para quem usa teclado, e o contraste de cor é verificado contra o próprio fundo da variante, não o da página.
Leia como uma grade: cada linha é uma variante, cada coluna é um tamanho. A célula mostra o botão real e ao vivo naquela combinação — estes são os mesmos elementos .btn que o app renderiza.
| variant \ size | sm | md | lg |
|---|---|---|---|
| primary | |||
| secondary | |||
| ghost | |||
| danger |
A célula inferior direita da tabela é apenas:
// React <Button variant="danger" size="lg">Excluir conta</Button> // HTML renderizado <button class="btn danger lg" type="button">Excluir conta</button>
Tamanhos mudam apenas padding e font-size; variantes mudam apenas cor e borda. Como os dois eixos nunca se tocam, você pode adicionar um novo size="xl" sem reverificar nenhuma variante.
A matriz mostra como cada uma se parece. Estes cards dizem quando usar cada uma. Escolha um tamanho para pré-visualizar todas as variantes naquele tamanho; a linha correspondente acende.
primary
A única ação principal da tela. Preenchida e marcante para que o olhar caia nela primeiro.
Evite: duas primárias brigando numa mesma tela.
secondary
A ação de apoio que fica ao lado da primária — "Cancelar", "Voltar". Com contorno, mais discreta.
Evite: usá-la para a ação que você de fato quer que seja clicada.
ghost
A opção de baixa prioridade — "Pular", ícones de barra de ferramentas, links que agem. Quase invisível até passar o mouse.
Evite: em uma ação crítica ou destrutiva (fácil demais de não notar).
danger
A ação destrutiva — excluir, remover, revogar. Vermelho mais um verbo claro mais uma etapa de confirmação.
Evite: vermelho sozinho com texto vago como "OK".
/* base + dois eixos independentes */ .btn { font-weight:600; border-radius:8px; border:1.5px solid transparent; } /* eixo de tamanho */ .btn.sm { font-size:13px; padding:7px 13px; } .btn.md { font-size:15px; padding:10px 18px; } .btn.lg { font-size:17px; padding:13px 24px; } /* eixo de variante */ .btn.primary { background:#D97757; color:#fff; } .btn.secondary { background:#fff; border-color:#D1CFC5; } .btn.ghost { background:transparent; color:#B85C3E; } .btn.danger { background:#B04A3F; color:#fff; }
O seletor de tamanho acima troca apenas a classe de tamanho de cada botão de demonstração via JS — prova de que os eixos são independentes em tempo de execução.