Optma DS · v0.1 · Button

Button em todas as variantes.

Botão é o componente que mais aparece. Tem cinco variantes (primary, outline, ghost, secondary, danger) em três tamanhos, com ícone opcional, loading e estado desabilitado.

Variantes

Cada variante carrega uma intenção. Primary é a ação principal da tela, máximo uma por contexto. Outline e ghost convivem em ações secundárias. Danger só pra destruir algo.

Primary · ação principal
Outline · ação secundária estruturada
Ghost · ação leve, link
Secondary · ação positiva alternativa
Danger · destruir, raro mas necessário

Tamanhos

SM (32px) pra UI densa, MD (44px) default em quase tudo, LG (52px) pra heros e CTAs principais de página.

SM · MD · LG
Apenas ícone (icon-only)

Em layout

Padrões de uso recorrentes.

Par primary + outline (footer de form)
Full-width (mobile / formulário estreito)