Component · Lumina

Button

Botão é a primeira impressão de cada decisão. No Lumina, ele tem três personalidades além do padrão (magnetic, liquid e ripple) para quando a marca precisa pulsar.

Variantes assinatura

Magnetic puxa o cursor. Liquid é uma borda viva. Ripple emana um halo. Use com parcimônia: uma assinatura por tela.

TSX

Variantes padrão

O dia a dia. Default para ação primária, outline para secundária, ghost para terciária. Destructive nunca como primeira opção em uma tela.

Tamanhos

Padrão é sm para a maioria dos contextos. lg para CTAs de hero. icon para barras compactas.

Estados

Hover sobe 2%, active afunda 2%, focus visível com ring de 2 px e offset.

Anti-padrões

O que evitar.

Mais de uma variante magnetic/liquid/ripple na mesma tela: vira ruído.
Destructive como ação primária. Use outline destructive em diálogos de confirmação.
Texto em caixa alta forçado. O Lumina escreve em sentence case.
Sombra forte (shadow-lg+) em botão. Se precisa de tanto destaque, é um CTA, não um botão de menu.

Acessibilidade

Sempre rotule botões só de ícone com aria-label.
Use aria-busy em vez de trocar texto para “Carregando…”.
Mínimo de 44×44 px de área tocável (a variante icon já cumpre).
Foco visível é obrigatório. Nunca remova o ring.