يُنسّق التوجيه nuiButton عنصر <button> أو <a> أصليًا. ويحتفظ العنصر بدلالاته وسلوكه مع لوحة المفاتيح ومشاركته في النماذج؛ فكل ما يفعله التوجيه هو عكس مُدخلاته على سمات data التي تستهدفها ورقة الأنماط.
استخدم <button> للإجراءات و<a> للتنقل. يبدو كلاهما بالشكل نفسه، وكلاهما يدعم disabled.
الأنماط
أربعة أنماط للتعبئة، من الأبرز إلى الأهدأ. استخدم زرًّا واحدًا بنمط solid في كل شاشة للإجراء الرئيسي.
الألوان
تحدد خاصية tone لوحة الألوان: accent للمسار الرئيسي، وneutral للإجراءات الثانوية، وdanger للإجراءات المدمِّرة.
الأحجام
ثلاثة ارتفاعات: 28 و36 و44 بكسل. وحتى أصغرها يتجاوز الحد الأدنى لحجم الهدف في WCAG 2.2.
الروابط والأزرار المعطّلة
لا تدعم عناصر الروابط التعطيل بشكل أصلي، لذا يحصل الرابط المعطّل على aria-disabled="true" وتُمنع النقرات عليه، حتى مع routerLink.
تأثيرات الضغط
اضغط مطولًا على كل زر. يحدد press ما يفعله الزر ما دام مضغوطًا، ويحدد motion النابض الذي يرتد به. وعند وضع data-nui-press على أي عنصر، يسري التأثير على كل ما بداخله.
الزوايا ونصف القطر والكثافة
يغيّر corners شكل الزوايا، وradius حجمها، وdensity المساحة التي يشغلها الزر، دون أن يصغر أبدًا عن حجم الهدف البالغ 24 بكسل. أما المتصفحات التي لا تدعم corner-shape فترسم الزوايا مستديرة.