Directive nuiButton กำหนดสไตล์ให้ <button> หรือ <a> แบบเนทีฟ เอลิเมนต์ยังคง semantics พฤติกรรมคีย์บอร์ด และการทำงานร่วมกับฟอร์มไว้ครบ ส่วน directive มีหน้าที่เพียงสะท้อนค่า input ไปยัง data attribute ที่สไตล์ชีตใช้เลือกเป้าหมาย
ใช้ <button> สำหรับคำสั่ง และใช้ <a> สำหรับการนำทาง ทั้งสองแบบหน้าตาเหมือนกันและรองรับ disabled เหมือนกัน
รูปแบบ
รูปแบบพื้นสีสี่แบบ ตั้งแต่เด่นที่สุดไปจนถึงเรียบที่สุด ในแต่ละหน้าจอควรมีปุ่มแบบ solid เพียงปุ่มเดียวสำหรับคำสั่งหลัก
โทนสี
โทนสีเปลี่ยนชุดสีของปุ่ม: accent สำหรับเส้นทางหลัก neutral สำหรับคำสั่งรอง และ danger สำหรับการกระทำที่ทำลายข้อมูล
ขนาด
ความสูงสามระดับ ได้แก่ 28 พิกเซล 36 พิกเซล และ 44 พิกเซล แม้แต่ขนาดเล็กที่สุดก็ยังเกินขนาดพื้นที่กดขั้นต่ำของ WCAG 2.2
ลิงก์และปุ่มที่ปิดใช้งาน
เอลิเมนต์ a ไม่มีสถานะปิดใช้งานแบบเนทีฟ ลิงก์ที่ปิดใช้งานจึงได้รับ aria-disabled="true" และการคลิกจะถูกบล็อก แม้จะใช้ routerLink ก็ตาม