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 を使っている場合でもクリックをブロックします。
押下エフェクト
ボタンを1つずつ長押ししてみてください。press は押している間のボタンの動きを、motion は元に戻るときのスプリングを設定します。任意の要素に data-nui-press を指定すると、その中のすべてに適用されます。
角の形、角丸、密度
corners は角の形を、radius は角の大きさを、density はボタンが占めるスペースの広さを変えます。ただし、ボタンが 24px のターゲットサイズを下回ることはありません。corner-shape に対応していないブラウザーでは、角は丸く描画されます。