A diretiva nuiButton estiliza um <button> ou um <a> nativo. O elemento mantém sua semântica, seu comportamento de teclado e sua participação em formulários; a diretiva apenas reflete seus inputs nos atributos data que a folha de estilo usa como alvo.
Use um <button> para ações e um <a> para navegação. Os dois têm a mesma aparência e ambos aceitam disabled.
Variantes
Quatro estilos de preenchimento, do mais chamativo ao mais discreto. Use um único botão sólido por tela, para a ação principal.
Tons
Os tons mudam a paleta: accent para o caminho principal, neutral para ações secundárias e danger para ações destrutivas.
Tamanhos
Três alturas: 28, 36 e 44 pixels. Até o menor supera o tamanho mínimo de alvo das WCAG 2.2.
Links e botões desativados
Links não podem ser desativados de forma nativa, então um link desativado recebe aria-disabled="true" e seus cliques são bloqueados, mesmo com routerLink.
Efeitos ao pressionar
Mantenha cada botão pressionado. press define o que um botão faz enquanto está pressionado, e motion, a mola com que ele volta ao lugar. data-nui-press em qualquer elemento define o efeito para tudo o que ele contém.
Cantos, raio e densidade
corners muda o formato dos cantos, radius o tamanho deles e density o espaço que um botão ocupa, sem nunca ficar abaixo do tamanho mínimo de alvo de 24 px. Navegadores sem corner-shape desenham cantos arredondados.