बैकग्राउंड का रंग, दीवार की सतह के हिसाब से अलग-अलग होता है.
प्राइमरी या अहम कार्रवाइयों के लिए. भरी हुई बॉर्डर वाले बटन, विज़ुअल वज़न देते हैं. साथ ही, ये "कार्ट में जोड़ें" और "साइन इन करें" जैसी कार्रवाइयों के लिए सही होते हैं.
उन कार्रवाइयों के लिए जो अहम हैं, लेकिन प्राइमरी नहीं हैं. आउटलाइन वाले बटन, अन्य बटन के साथ अच्छी तरह से काम करते हैं. इनसे "रद्द करें" या "वापस जाएं" जैसी वैकल्पिक और दूसरी कार्रवाइयों के बारे में पता चलता है.
नेविगेशनल लिंक या "ज़्यादा जानें" या "जानकारी देखें" जैसी सेकंडरी कार्रवाइयों के लिए.
वर्शन के साथ काम करना
इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.
डिपेंडेंसी
भरा हुआ बटन बनाना
भरा हुआ बटन कॉम्पोनेंट, बुनियादी Button कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से एक ही रंग से भरा होता है.
नतीजे
पहली इमेज. भरा हुआ बटन.
भरा हुआ टोनल बटन बनाना
भरा हुआ टोनल बटन कॉम्पोनेंट, FilledTonalButton कॉम्पोज़ेबल का इस्तेमाल करता है.
यह डिफ़ॉल्ट रूप से टोनल कलर से भरा होता है.
नतीजे
दूसरी इमेज. टोन वाला बटन.
आउटलाइन वाला बटन बनाना
आउटलाइन वाला बटन कॉम्पोनेंट, OutlinedButton कॉम्पोज़ेबल का इस्तेमाल करता है. यह डिफ़ॉल्ट रूप से आउटलाइन के साथ दिखता है.
नतीजे
तीसरी इमेज. आउटलाइन वाला बटन.
एलिमेंट को हाइलाइट करने वाला बटन बनाना
एलिवेटेड बटन कॉम्पोनेंट, ElevatedButton कॉम्पोज़ेबल का इस्तेमाल करता है. इसमें एक शेडो होता है, जो डिफ़ॉल्ट रूप से ऊंचाई के असर को दिखाता है. यह शेडो के साथ, आउटलाइन वाले बटन के तौर पर दिखता है.
नतीजे
चौथी इमेज. उभरा हुआ बटन.
टेक्स्ट बटन बनाना
टेक्स्ट बटन कॉम्पोनेंट, TextButton कॉम्पोज़ेबल का इस्तेमाल करता है. क्लिक किए जाने तक, यह सिर्फ़ टेक्स्ट के तौर पर दिखता है. इसमें डिफ़ॉल्ट रूप से कोई सॉलिड फ़िल या आउटलाइन नहीं होता.
नतीजे
पांचवीं इमेज. टेक्स्ट बटन.
प्रमुख बिंदु
onClick: यह फ़ंक्शन तब कॉल किया जाता है, जब उपयोगकर्ता बटन दबाता है.
enabled: अगर इस पैरामीटर की वैल्यू गलत है, तो बटन उपलब्ध नहीं होगा और बंद रहेगा.
colors: ButtonColors का एक इंस्टेंस, जो बटन में इस्तेमाल किए गए रंगों का पता लगाता है.
contentPadding: बटन के अंदर पैडिंग.
ऐसे संग्रह जिनमें यह गाइड शामिल है
यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:
इंटरैक्टिव कॉम्पोनेंट दिखाना
जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.
इस पेज पर मौजूद कॉन्टेंट और कोड सैंपल कॉन्टेंट के लाइसेंस में बताए गए लाइसेंस के हिसाब से हैं. Java और OpenJDK, Oracle और/या इससे जुड़ी हुई कंपनियों के ट्रेडमार्क या रजिस्टर किए हुए ट्रेडमार्क हैं.
आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया.
[null,null,["आखिरी बार 2025-02-06 (UTC) को अपडेट किया गया."],[],[],null,["\u003cbr /\u003e\n\nButtons let the user trigger a defined action. There are five types of\nbutton:\n\n| Type | Appearance | Purpose |\n|-------------------------------|-----------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Filled](#create-filled) | Solid background with contrasting text. | For primary actions, such as \"Submit\" and \"Save.\" The shadow effect emphasizes the button's importance. |\n| [Tonal](#create-filled-tonal) | Background color varies to match the surface. | For primary or significant actions. Filled buttons provide visual weight and are appropriate for actions like \"Add to cart\" and \"Sign in.\" |\n| [Elevated](#create-elevated) | Shadow makes it stand out. | For primary or significant actions. Increase elevation to make the button more prominent. |\n| [Outlined](#create-outlined) | Features a border with no fill. | For actions that are important but not primary. Outlined buttons pair well with other buttons to indicate alternative, secondary actions like \"Cancel\" or \"Back.\" |\n| [Text](#create-text) | Text with no background or border. | For less critical actions such as navigational links, or secondary actions like \"Learn more\" or \"View details.\" |\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate a filled button\n\nThe filled button component uses the basic [`Button`](/reference/kotlin/androidx/compose/material3/package-summary?#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It is\nfilled with a solid color by default.\n\nResults **Figure 1.** A filled button.\n\nCreate a filled tonal button\n\nThe filled tonal button component uses the [`FilledTonalButton`](/reference/kotlin/androidx/compose/material3/package-summary#FilledTonalButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable.\nIt is filled with a tonal color by default.\n\nResults **Figure 2.** A tonal button.\n\nCreate an outlined button\n\nThe outlined button component uses the [`OutlinedButton`](/reference/kotlin/androidx/compose/material3/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It\nappears with an outline by default.\n\nResults **Figure 3.** An outlined button.\n\nCreate an elevated button\n\nThe elevated button component uses the [`ElevatedButton`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. It has\na shadow that represents the elevation effect by default and appears as\nan outlined button with a shadow.\n\nResults **Figure 4.** An elevated button.\n\nCreate a text button\n\nThe text button component uses the [`TextButton`](/reference/kotlin/androidx/compose/material3/package-summary#TextButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ButtonColors,androidx.compose.material3.ButtonElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) composable. Until clicked,\nit appears only as text. It does not have a solid fill or outline by default.\n\nResults **Figure 5.** A text button.\n\nKey points\n\n- `onClick`: The function called when the user presses the button.\n- `enabled`: When false, this parameter causes the button to appear unavailable and inactive.\n- `colors`: An instance of `ButtonColors` that determines the colors used in the button.\n- `contentPadding`: The padding within the button.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]