Atoms · Onda 1 · 01
Button
Cinco variantes, quatro tamanhos. Primary só uma vez por superfície — é a ação mais importante daquela tela. Ghost para tudo que é navegação, secondary para o resto.
Variantes
Cada variante tem um papel único. Não duplique primary numa mesma área — quebra a hierarquia visual.
Primary
Secondary
Ghost
Link
Destructive
Tamanhos
Default em quase tudo. Hero apenas em CTA principal de landing. Compact em toolbars densas e tabelas.
Com ícone
Ícone Lucide à esquerda do label, gap 6px. Ícone-only deve ter aria-label.
Estados
Hover, active, focus, disabled. Loading com spinner inline.
Anatomia
Especificação canônica. Toda variant usa a mesma escala.
| Token | Compact | Default | Prominent | Hero |
|---|---|---|---|---|
| Altura | 28px | 32px | 36px | 44px |
| Padding-x | 10px | 14px | 16px | 22px |
| Font-size | 12px | 13px | 13.5px | 14px |
| Font-weight | 500 | 500 | 500 | 600 |
| Border-radius | --radius-sm · 6px | --radius-sm · 6px | --radius-sm · 6px | --radius-sm · 6px |
| Gap (com ícone) | 6px | 6px | 6px | 8px |
Regras
DO
Uma única ação primary por superfície. Ela é a ação mais importante daquela tela.
DO
Use destructive apenas para ações irreversíveis — encerrar caso, excluir fonte, revogar acesso.
DO
Em modais de confirmação, primary é a confirmação; ghost é o cancelar.
DON'T
Não use primary para "Cancelar" ou navegação. Cancelar é ghost; navegar é secondary ou link.
DON'T
Não duplique primary numa toolbar. Se há duas ações importantes, escolha uma — a outra vira secondary.
DON'T
Não use destructive para "Limpar filtros" — isso é ghost.
Como usar
<button class="pb pb-primary">Declarar crise</button>
<button class="pb pb-secondary pb-sm">Exportar</button>
<button class="pb pb-ghost pb-icon" aria-label="Atualizar">
<RefreshIcon size={14} />
</button>