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 सपोर्ट न करणारे ब्राउझर गोल कोपरे काढतात.