बटन

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

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

एपीआई सरफ़ेस

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

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

अन्य संसाधन

• फ़्लोटिंग ऐक्शन बटन
• Material Design 3 Buttons के बारे में खास जानकारी