nuiButton ડાયરેક્ટિવ નેટિવ <button> કે <a> ને સ્ટાઇલ આપે છે. એલિમેન્ટ પોતાની સિમેન્ટિક્સ, કીબોર્ડ વર્તન અને ફૉર્મમાંની ભાગીદારી જાળવી રાખે છે; ડાયરેક્ટિવ ફક્ત પોતાના ઇનપુટ્સને એ data એટ્રિબ્યુટ્સમાં પ્રતિબિંબિત કરે છે, જેને સ્ટાઇલશીટ ટાર્ગેટ કરે છે.
ક્રિયાઓ માટે <button> અને નેવિગેશન માટે <a> વાપરો. બંને એકસરખાં દેખાય છે, અને બંને disabled ને સપોર્ટ કરે છે.
વેરિઅન્ટ્સ
સૌથી આગળ પડતીથી લઈને સૌથી સૌમ્ય સુધીની ચાર ફિલ સ્ટાઇલ. મુખ્ય ક્રિયા માટે દરેક વ્યૂમાં એક જ solid બટન વાપરો.
ટોન્સ
ટોન પૅલેટ બદલે છે: મુખ્ય માર્ગ માટે accent, ગૌણ ક્રિયાઓ માટે neutral, અને ડિલીટ જેવી જોખમી ક્રિયાઓ માટે danger.
કદ
ત્રણ ઊંચાઈ: 28, 36 અને 44 પિક્સેલ. સૌથી નાનું કદ પણ WCAG 2.2 ના લઘુતમ ટાર્ગેટ કદ કરતાં મોટું છે.
લિંક અને ડિસેબલ કરેલાં બટનો
anchor એલિમેન્ટ્સને નેટિવ રીતે ડિસેબલ કરી શકાતા નથી, તેથી ડિસેબલ કરેલી લિંકને aria-disabled="true" મળે છે અને routerLink હોય તો પણ તેની ક્લિક અટકાવાય છે.
દબાવવાની ઇફેક્ટ્સ
દરેક બટન દબાવી રાખો. દબાવી રાખતાં બટન શું કરે તે press નક્કી કરે છે, અને તે કઈ સ્પ્રિંગથી પાછું આવે તે motion નક્કી કરે છે. કોઈ પણ એલિમેન્ટ પર મૂકેલો data-nui-press તેની અંદરની દરેક વસ્તુને લાગુ પડે છે.
ખૂણા, રેડિયસ અને ડેન્સિટી
corners ખૂણાનો આકાર બદલે છે, radius તેમનું કદ, અને density બટન કેટલી જગ્યા રોકે તે, પણ એ જગ્યા ક્યારેય 24px ના ટાર્ગેટ કદથી ઓછી થતી નથી. corner-shape ને સપોર્ટ ન કરતાં બ્રાઉઝર ગોળ ખૂણા દોરે છે.