Direktif nuiButton memberi gaya pada <button> atau <a> native. Elemennya tetap mempertahankan semantik, perilaku keyboard, dan perannya dalam formulir; direktif ini hanya meneruskan input-nya ke atribut data yang menjadi target stylesheet.
Gunakan <button> untuk aksi dan <a> untuk navigasi. Keduanya tampil sama dan sama-sama mendukung disabled.
Varian
Empat gaya isian, dari yang paling menonjol hingga yang paling kalem. Gunakan satu tombol solid per tampilan untuk aksi utama.
Tone
Tone mengubah palet warna: accent untuk alur utama, neutral untuk aksi sekunder, dan danger untuk aksi destruktif.
Ukuran
Tiga tinggi: 28, 36, dan 44 piksel. Bahkan yang terkecil pun melampaui ukuran target minimum WCAG 2.2.
Tautan dan tombol nonaktif
Anchor tidak bisa dinonaktifkan secara native, jadi tautan nonaktif mendapat aria-disabled="true" dan kliknya diblokir, bahkan dengan routerLink.
Efek tekan
Tekan dan tahan setiap tombol. press menentukan apa yang dilakukan tombol saat ditahan, dan motion menentukan pegas yang membawanya kembali. data-nui-press di elemen mana pun menerapkan efek ini ke semua yang ada di dalamnya.
Sudut, radius, dan kepadatan
corners mengubah bentuk sudut, radius mengubah ukurannya, dan density mengubah ruang yang digunakan tombol, tetapi tidak pernah lebih kecil dari ukuran target 24px. Browser tanpa dukungan corner-shape menggambar sudut membulat.