La direttiva nuiButton dà stile a un <button> o a un <a> nativo. L’elemento conserva semantica, comportamento da tastiera e partecipazione ai moduli; la direttiva si limita a riflettere i suoi input negli attributi data usati dal foglio di stile.
Usa un <button> per le azioni e un <a> per la navigazione. Hanno lo stesso aspetto ed entrambi supportano disabled.
Varianti
Quattro stili di riempimento, dal più evidente al più discreto. Usa un solo pulsante pieno per vista, per l’azione principale.
Toni
I toni cambiano la palette: accent per il percorso principale, neutral per le azioni secondarie, danger per quelle distruttive.
Dimensioni
Tre altezze: 28, 36 e 44 pixel. Anche la più piccola supera l’area di tocco minima delle WCAG 2.2.
Link e pulsanti disattivati
Gli anchor non si possono disattivare nativamente: un link disattivato riceve aria-disabled="true" e i suoi clic vengono bloccati, anche con routerLink.
Effetti alla pressione
Tieni premuto ciascun pulsante. press stabilisce cosa fa un pulsante mentre resta premuto, e motion la molla con cui torna in posizione. data-nui-press su qualsiasi elemento imposta l’effetto per tutto ciò che contiene.
Angoli, raggio e densità
corners cambia la forma degli angoli, radius la loro dimensione e density lo spazio che occupa un pulsante, senza mai scendere sotto l’area di tocco minima di 24px. I browser senza corner-shape disegnano angoli arrotondati.