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

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

नीचे दी गई इमेज में मटीरियल डिज़ाइन में पांच तरह के बटन दिखाए गए हैं.

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

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

'भरा गया' बटन

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

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

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

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

भरे हुए टोनल बटन कॉम्पोनेंट में, 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

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

अन्य संसाधन

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