nuiButton ডিরেক্টিভ একটি নেটিভ <button> বা <a>-কে স্টাইল করে। এলিমেন্টের সিম্যান্টিকস, কীবোর্ড আচরণ ও ফর্মে অংশগ্রহণ যেমন ছিল তেমনই থাকে; ডিরেক্টিভ শুধু তার ইনপুটগুলোকে সেই data অ্যাট্রিবিউটে প্রতিফলিত করে, যেগুলোকে স্টাইলশিট টার্গেট করে।
অ্যাকশনের জন্য <button> আর নেভিগেশনের জন্য <a> ব্যবহার করুন। দুটো দেখতে একই রকম, আর দুটোই disabled সাপোর্ট করে।
ভ্যারিয়েন্ট
চারটি ফিল স্টাইল, সবচেয়ে নজরকাড়া থেকে সবচেয়ে সংযত পর্যন্ত। প্রতিটি ভিউতে মূল অ্যাকশনের জন্য একটিই solid বাটন রাখুন।
টোন
টোন রঙের প্যালেট বদলায়: মূল পথের জন্য accent, গৌণ অ্যাকশনের জন্য neutral, আর ঝুঁকিপূর্ণ অ্যাকশনের জন্য danger।
সাইজ
তিনটি উচ্চতা: 28, 36 ও 44 পিক্সেল। সবচেয়ে ছোটটিও WCAG 2.2-এর ন্যূনতম টার্গেট সাইজ পেরিয়ে যায়।
লিংক ও নিষ্ক্রিয় বাটন
অ্যাঙ্করকে নেটিভভাবে নিষ্ক্রিয় করা যায় না, তাই নিষ্ক্রিয় লিংক পায় aria-disabled="true", আর routerLink থাকলেও তার ক্লিক আটকে দেওয়া হয়।
চাপ দেওয়ার ইফেক্ট
প্রতিটি বাটন চেপে ধরে রাখুন। চেপে ধরে রাখলে বাটন কী করবে, তা ঠিক করে press, আর সেটি কোন স্প্রিংয়ে ফিরে আসবে, তা ঠিক করে motion। যেকোনো এলিমেন্টে data-nui-press দিলে তার ভেতরের সবকিছুতে এটি খাটে।
কোণ, রেডিয়াস ও ডেনসিটি
corners কোণের আকৃতি বদলায়, radius তার সাইজ, আর density বাটন কতটা জায়গা নেবে তা, তবে সেই জায়গা কখনো 24px টার্গেট সাইজের চেয়ে কম হয় না। যেসব ব্রাউজার corner-shape সাপোর্ট করে না, সেগুলো কোণ গোল করে আঁকে।