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 सपोर्ट नहीं करते, वे कोने गोल बनाते हैं।