La directive nuiButton met en forme un <button> ou un <a> natif. L’élément conserve sa sémantique, son comportement au clavier et sa participation aux formulaires ; la directive se contente de reporter ses inputs sur les attributs data que cible la feuille de style.
Utilisez un <button> pour les actions et un <a> pour la navigation. Les deux ont le même aspect, et tous deux prennent en charge disabled.
Variantes
Quatre styles de remplissage, du plus visible au plus discret. Utilisez un seul bouton plein par vue, pour l’action principale.
Tons
Les tons changent la palette : accent pour le parcours principal, neutral pour les actions secondaires, danger pour les actions destructrices.
Tailles
Trois hauteurs : 28, 36 et 44 pixels. Même la plus petite dépasse la taille de cible minimale des WCAG 2.2.
Liens et boutons désactivés
Une ancre ne peut pas être désactivée nativement : un lien désactivé reçoit donc aria-disabled="true" et ses clics sont bloqués, même avec routerLink.
Effets d’appui
Appuyez longuement sur chaque bouton. press définit ce que fait un bouton tant qu’il est enfoncé, et motion, le ressort qui le ramène en place. Sur n’importe quel élément, data-nui-press applique l’effet à tout son contenu.
Coins, rayon et densité
corners change la forme des coins, radius leur taille et density la place qu’occupe un bouton, sans jamais descendre sous la taille de cible minimale de 24 px. Les navigateurs qui ne prennent pas en charge corner-shape dessinent des coins arrondis.