बटन

बटन, उपयोगकर्ता की कार्रवाइयों के लिए मुख्य विज़ुअल इंडिकेटर होते हैं.

सिद्धांत

कार्रवाई के लिए तैयार: बटन से साफ़ तौर पर पता चलना चाहिए कि वे किसी कार्रवाई को ट्रिगर करते हैं.

साफ़ तौर पर दिखने वाला फ़ीडबैक: बटन की बनावट, इंटरैक्शन की अलग-अलग स्थितियों (होवर करना, दबाना, फ़ोकस करना) में साफ़ तौर पर बदलनी चाहिए, ताकि तुरंत फ़ीडबैक मिल सके.

एक जैसे: सभी बटन एक जैसे दिखने चाहिए, ताकि उन्हें तुरंत पहचाना जा सके.

लचीला: बटन कॉम्पोनेंट में सामान्य बदलाव किए जा सकते हैं. जैसे, आइकॉन और अलग-अलग साइज़ शामिल करना. हालांकि, ऐसा करते समय यह ध्यान रखना चाहिए कि बटन की स्टाइल में कोई बदलाव न हो.

इस्तेमाल और प्लेसमेंट

बटन को उससे जुड़े कॉन्टेंट के आस-पास रखा जाना चाहिए. इन्हें अकेले या कार्ड और सूचियों जैसे अन्य कॉम्पोनेंट के साथ रखा जा सकता है.

check_circle

यह करें

कम काम की कार्रवाइयों को दिखाने के लिए, प्रोग्रेसिव डिसक्लोज़र का इस्तेमाल करें.

cancel

यह न करें

बहुत सारे बटन दिखाकर, उपयोगकर्ता को परेशान करना.

check_circle

यह करें

किसी कार्रवाई को बढ़ावा देने के लिए, बटन का इस्तेमाल करें. इसके अलावा, किसी स्टैटिक एलिमेंट के लिए टाइटल चिप का इस्तेमाल करें.

cancel

यह न करें

बटन का इस्तेमाल स्टैटिक डेकोरेटिव एलिमेंट के तौर पर किया जाता है.

शरीर-रचना विज्ञान

डिफ़ॉल्ट

1. चालू है: डिफ़ॉल्ट स्थिति. 2. कर्सर घुमाएं 3. टैप करें

बड़ा

1. चालू है: डिफ़ॉल्ट स्थिति. 2. कर्सर घुमाएं 3. टैप करें

पसंद के मुताबिक बनाएं

बटन में डिफ़ॉल्ट और बड़े वैरिएंट के साथ-साथ, हर बटन के लिए डिफ़ॉल्ट, फ़ोकस किए गए, और दबाए गए स्टेट शामिल होते हैं. बटन को ज़्यादा अहमियत देने, उसे ज़्यादा साफ़ तौर पर दिखाने, और उसे पहचानने में आइकॉन का इस्तेमाल किया जा सकता है. बटन के साइज़ से, उसकी अहमियत को हाइलाइट किया जा सकता है.