components
button
Botões comunicam ações que os usuários podem tomar. 5 variantes pra diferentes níveis de hierarquia, 4 tamanhos.
overview
playground interativo
Ajuste props · veja preview + código atualizar em tempo real.
código gerado
<button class="btn btn--primary">label</button>
variantes
Primary
Ação mais importante de uma página. Use no máximo uma por contexto.
Secondary
Ação alternativa de mesmo peso. Usada junto ao primary.
Tertiary
Ação de baixa ênfase. Outlined, sem fundo.
Ghost
Mínimo destaque visual. Sem fundo nem borda.
Danger
Ação destrutiva — deletar, remover, cancelar permanente.
tamanhos
small: 32px · default: 48px · large: 64px · xl: 80px
estados
anatomia
- Container — fundo da variante (primary, secondary, etc.)
- Label — verbo no infinitivo, caixa baixa
- Glifo — seta indicando ação direcional (opcional)
modifiers · api
| prop | tipo | default | descrição |
|---|---|---|---|
| .btn--primary | class | — | variante primária — destaque verde |
| .btn--secondary | class | — | variante secundária — dos |
| .btn--tertiary | class | — | variante outlined |
| .btn--ghost | class | — | sem fundo nem borda |
| .btn--danger | class | — | ação destrutiva |
| .btn--sm | class | — | altura 32px |
| .btn--lg | class | — | altura 64px · 2 linhas opcional |
| .btn--xl | class | — | altura 80px · expressivo |
| .btn--icon | class | — | botão só com ícone |
| disabled | attr | — | desabilita interação |
quando usar
use
não use
acessibilidade
- Elemento <button> nativo, não div
- type="button" explícito (default é submit)
- Foco visível com outline 2px
- Disabled: aria-disabled true OU disabled attribute
- Botão só com ícone tem aria-label
código
<!-- variantes -->
<button type="button" class="btn btn--primary">salvar</button>
<button type="button" class="btn btn--secondary">cancelar</button>
<button type="button" class="btn btn--danger">deletar</button>
<!-- tamanho -->
<button class="btn btn--primary btn--sm">small</button>
<!-- icon-only -->
<button class="btn btn--ghost btn--icon" aria-label="fechar">×</button>