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

यह लागू होने का तरीका इस तरह दिखता है:

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

अन्य संसाधन

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