बटन

keywords: AiAssisted, product:JetpackCompose

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

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

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

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

एपीआई सरफेस

onClick
यह वह फ़ंक्शन है जिसे उपयोगकर्ता के बटन दबाने पर सिस्टम कॉल करता है.
enabled
false होने पर, यह पैरामीटर बटन को अनुपलब्ध और निष्क्रिय बना देता है.
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

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

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

अन्य संसाधन