La directiva nuiButton da estilo a un <button> o un <a> nativo. El elemento conserva su semántica, su comportamiento con el teclado y su participación en formularios; la directiva solo refleja sus inputs en los atributos data a los que apunta la hoja de estilos.
Usa un <button> para las acciones y un <a> para la navegación. Los dos se ven igual y ambos admiten disabled.
Variantes
Cuatro estilos de relleno, del más llamativo al más discreto. Usa un solo botón sólido por vista, para la acción principal.
Tonos
Los tonos cambian la paleta: accent para el camino principal, neutral para las acciones secundarias y danger para las destructivas.
Tamaños
Tres alturas: 28, 36 y 44 píxeles. Incluso el más pequeño supera el tamaño mínimo de objetivo de las WCAG 2.2.
Enlaces y botones desactivados
Los enlaces no se pueden desactivar de forma nativa, así que un enlace desactivado recibe aria-disabled="true" y sus clics se bloquean, incluso con routerLink.
Efectos al pulsar
Mantén pulsado cada botón. press define qué hace un botón mientras está pulsado, y motion, el resorte con el que vuelve a su sitio. data-nui-press en cualquier elemento aplica el efecto a todo lo que contiene.
Esquinas, radio y densidad
corners cambia la forma de las esquinas, radius su tamaño y density el espacio que ocupa un botón, sin bajar nunca del tamaño mínimo de objetivo de 24 px. Los navegadores sin corner-shape dibujan las esquinas redondeadas.