बटन

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

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

इस इमेज में, मटीरियल डिज़ाइन में मौजूद पांच तरह के बटन दिखाए गए हैं:

पांचों बटन कॉम्पोनेंट का उदाहरण. इनमें उनकी खास बातों को हाइलाइट किया गया है.
पहली इमेज. पाँच बटन कॉम्पोनेंट.

एपीआई सरफ़ेस

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

फ़िल्ड बटन

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

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

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

बैंगनी रंग के बैकग्राउंड वाला फ़िल्ड बटन, जिस पर 'फ़िल्ड' लिखा है.
दूसरी इमेज. फ़िल्ड बटन.

फ़िल्ड टोनल बटन

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

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

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

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

हल्के बैंगनी रंग के बैकग्राउंड वाला टोनल बटन. इस पर 'टोनल' लिखा है.
तीसरी इमेज. टोनल बटन.

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

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

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

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

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

आउटलाइन वाला पारदर्शी बटन, जिस पर गहरे रंग का बॉर्डर है. इस पर 'आउटलाइन वाला' लिखा है.
चौथी इमेज. आउटलाइन वाला बटन.

उभरे हुए बटन

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

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

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

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

ग्रे बैकग्राउंड वाला उभरा हुआ बटन. इस पर 'एलिवेटेड' लिखा है.
पांचवीं इमेज. उभरे हुए बटन.

टेक्स्ट बटन

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

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

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

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

'टेक्स्ट बटन' लिखा हुआ टेक्स्ट बटन
छठी इमेज. टेक्स्ट बटन.

अन्य संसाधन