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

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

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

अन्य संसाधन

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