Button

बटन, बुनियादी कॉम्पोनेंट होते हैं. इनकी मदद से, उपयोगकर्ता किसी तय कार्रवाई को ट्रिगर कर सकता है. बटन पांच तरह के होते हैं. नीचे दी गई टेबल में, पांच तरह के बटन के दिखने के तरीके के साथ-साथ, यह भी बताया गया है कि आपको उन्हें कहां इस्तेमाल करना चाहिए.

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

इस इमेज में, Material Design में पांच तरह के बटन दिखाए गए हैं.

पहली इमेज. पांच बटन कॉम्पोनेंट.

एपीआई का प्लैटफ़ॉर्म

• onClick: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता बटन दबाता है.
• enabled: अगर इस पैरामीटर की वैल्यू 'गलत' है, तो बटन उपलब्ध नहीं होगा और बंद रहेगा.
• colors: ButtonColors का एक इंस्टेंस, जो बटन में इस्तेमाल किए गए रंगों का पता लगाता है.
• contentPadding: बटन के अंदर पैडिंग.

भरा हुआ बटन

भरा हुआ बटन कॉम्पोनेंट, बुनियादी Button कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से किसी एक रंग से भरा होता है. नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun FilledButtonExample(onClick: () -> Unit) {
    Button(onClick = { onClick() }) {
        Text("Filled")
    }
}
Button.kt

ध्यान दें: अगर आपको कस्टम बटन बनाना है, तो Button कॉम्पोज़ेबल का इस्तेमाल करें.

लागू होने पर यह ऐसा दिखता है:

दूसरी इमेज. भरा हुआ बटन.

भरा हुआ टोनल बटन

भरा हुआ टोनल बटन कॉम्पोनेंट, FilledTonalButton कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से टोनल कलर से भरा होता है.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun FilledTonalButtonExample(onClick: () -> Unit) {
    FilledTonalButton(onClick = { onClick() }) {
        Text("Tonal")
    }
}
Button.kt

लागू होने पर यह ऐसा दिखता है:

तीसरी इमेज. टोन वाला बटन.

आउटलाइन वाला बटन

आउटलाइन वाला बटन कॉम्पोनेंट, OutlinedButton कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से आउटलाइन के साथ दिखता है.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun OutlinedButtonExample(onClick: () -> Unit) {
    OutlinedButton(onClick = { onClick() }) {
        Text("Outlined")
    }
}
Button.kt

लागू होने पर यह ऐसा दिखता है:

चौथी इमेज. आउटलाइन वाला बटन.

उभरा हुआ बटन

एलिवेटेड बटन कॉम्पोनेंट, ElevatedButton कॉम्पोज़ेबल का इस्तेमाल करता है. इसमें एक ऐसी स्‍हाडो होती है जो डिफ़ॉल्ट रूप से ऊंचाई के असर को दिखाती है. ध्यान दें कि यह मुख्य रूप से, आउटलाइन वाला एक बटन है, जिसमें शैडो है.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun ElevatedButtonExample(onClick: () -> Unit) {
    ElevatedButton(onClick = { onClick() }) {
        Text("Elevated")
    }
}
Button.kt

लागू होने पर यह ऐसा दिखता है:

पांचवीं इमेज. उभरा हुआ बटन.

टेक्स्ट बटन

टेक्स्ट बटन कॉम्पोनेंट, TextButton कॉम्पोज़ेबल का इस्तेमाल करता है. बटन को दबाए जाने तक, वह सिर्फ़ टेक्स्ट के तौर पर दिखता है. इसमें डिफ़ॉल्ट रूप से कोई सॉलिड फ़िल या आउटलाइन नहीं होता.

नीचे दिए गए स्निपेट में, कॉम्पोनेंट को लागू करने का तरीका बताया गया है:

@Composable
fun TextButtonExample(onClick: () -> Unit) {
    TextButton(
        onClick = { onClick() }
    ) {
        Text("Text Button")
    }
}
Button.kt

लागू होने पर यह ऐसा दिखता है:

छठी इमेज. टेक्स्ट बटन.

अन्य संसाधन

• फ़्लोट करने वाला ऐक्शन बटन
• Material यूज़र इंटरफ़ेस (यूआई) के दस्तावेज़