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

सिद्धांत
ऐक्शन-ओरिएंटेड: बटन से साफ़ तौर पर पता चलना चाहिए कि वे किसी कार्रवाई को ट्रिगर करते हैं.
साफ़ तौर पर फ़ीडबैक: तुरंत फ़ीडबैक देने के लिए, अलग-अलग इंटरैक्शन स्थितियों (कर्सर ले जाना, दबाना, फ़ोकस करना) में बटन की बनावट में साफ़ तौर पर बदलाव दिखना चाहिए.
एक जैसा: सभी बटन एक जैसी विज़ुअल भाषा में होने चाहिए, ताकि उन्हें तुरंत पहचाना जा सके.
फ़्लेक्सिबल: बटन कॉम्पोनेंट में, सामान्य बदलाव किए जा सकते हैं. जैसे, आइकॉन शामिल करना और अलग-अलग साइज़ का इस्तेमाल करना. हालांकि, ऐसा करने पर भी बटन की बनावट में एकरूपता बनी रहनी चाहिए.
इस्तेमाल करने का तरीका और प्लेसमेंट
किसी बटन को, उससे जुड़े कॉन्टेंट के पास रखा जाना चाहिए. इन्हें अकेले या अन्य कॉम्पोनेंट के साथ रखा जा सकता है. जैसे, कार्ड और सूचियां.
यह करें
ऐसा न करें
यह करें
ऐसा न करें
शरीर-रचना विज्ञान
डिफ़ॉल्ट
1. चालू है: डिफ़ॉल्ट स्थिति.
2. कर्सर ले जाना 3. टैप करें
बड़ा
1. चालू है: डिफ़ॉल्ट स्थिति.
2. कर्सर ले जाना 3. टैप करें
पसंद के मुताबिक बनाएं
बटन के लिए डिफ़ॉल्ट और बड़े वैरिएंट के साथ-साथ, हर वैरिएंट के लिए डिफ़ॉल्ट, फ़ोकस की गई, और दबाई गई स्थितियां उपलब्ध होती हैं. बटन पर ज़्यादा ज़ोर देने, उसे साफ़ तौर पर दिखाने, और उसे पहचानने में मदद करने के लिए, आइकॉन का इस्तेमाल किया जा सकता है. बटन का साइज़, उसकी अहमियत को दिखाने में मदद कर सकता है.
डिफ़ॉल्ट
| प्रॉपर्टी | पसंद के मुताबिक बनाएं | डिफ़ॉल्ट |
|---|---|---|
| आकार | हां | बड़ा, गोल |
| पैडिंग (जगह) | हां | 16 dp, 8 dp |
| बॉर्डर | हां | 2 dp, #606460 |
| टेक्स्ट | हां | बॉडी स्मॉल |
| लीडिंग आइकॉन | हां | 40 dp |
| ट्रेलिंग आइकॉन | हां | 40 dp |
| साइज़ | हां | कम से कम 56 dp ऊंचाई |
| डेप्थ | हां | 0 |
बड़ा
| प्रॉपर्टी | पसंद के मुताबिक बनाएं | डिफ़ॉल्ट |
|---|---|---|
| आकार | हां | बड़ा, गोल |
| पैडिंग (जगह) | हां | 20 dp, 8 dp |
| बॉर्डर | हां | 2 dp, #606460 |
| टेक्स्ट | हां | बॉडी स्मॉल |
| लीडिंग आइकॉन | हां | 56 dp |
| ट्रेलिंग आइकॉन | हां | 56 dp |
| साइज़ | हां | कम से कम 72 dp ऊंचाई |
| डेप्थ | हां | 0 |
| सतह | नहीं |