Button

O componente vive em @zexon/ui/components/button. O estilo segue Tailwind (text-sm, font-medium, text-xs no tamanho xs). Cores usam tokens semânticos (bg-primary, border-input na variante outline, etc.). Suporta asChild (Radix Slot) para renderizar como outro elemento (por exemplo Link).

Uso

Variantes

As variantes disponíveis são default, outline, secondary, ghost, destructive, link e hud (trilho com colchetes; mesmo núcleo que o BracketButton).

Tamanhos

Além do default, existem xs, sm, lg e tamanhos só de ícone: icon, icon-xs, icon-sm, icon-lg.

Estados e acessibilidade

Use disabled para desativar o botão. Para formulários, combine com aria-invalid no controle associado: o estilo de erro é aplicado via aria-invalid no próprio botão quando necessário.

Aplicações

Como link (Next.js)

Com asChild, o botão delega o elemento raiz ao filho — útil para navegação com Link.

BracketButton

BracketButton é exportado de @zexon/ui/components/button e partilha o mesmo primitivo HUD que o Switch padrão (HudCornerBrackets + trilho border-border/40 e bg-muted/30): colchetes em L com border-2, muted-foreground que passa a primary em hover e foco, e ao clicar os cantos deslocam-se ligeiramente para dentro (group-active/button). Aceita size e asChild como o Button base (variant="ghost" por baixo).

Uso: destine-o a ações principais (CTAs, confirmações, escolhas de alto destaque). Não use para navegação auxiliar discreta — aí prefira Button variant="ghost" / link ou padrões da LPNavbar.

Com asChild (link)

Ações de confirmação