nuiButton ディレクティブは、ネイティブの <button> または <a> にスタイルを適用します。要素本来のセマンティクス、キーボード操作、フォームとの連携はそのまま保たれます。ディレクティブが行うのは、入力の値をスタイルシートが参照する data 属性に反映することだけです。
アクションには <button>、ナビゲーションには <a> を使ってください。どちらも見た目は同じで、どちらも disabled に対応しています。
バリアント
塗りのスタイルは4種類あり、最も目立つものから最も控えめなものまで揃っています。主要なアクションに使う塗りつぶしのボタンは、1画面につき1つにしてください。
トーン
トーンはパレットを切り替えます。メインの導線には accent、補助的なアクションには neutral、破壊的なアクションには danger を使います。
サイズ
高さは28、36、44ピクセルの3種類です。最も小さいサイズでも WCAG 2.2 の最小ターゲットサイズを満たします。
リンクと無効なボタン
a 要素はネイティブには無効化できないため、無効なリンクには aria-disabled="true" を設定し、routerLink を使っている場合でもクリックをブロックします。