Đối với các hành động chính hoặc quan trọng. Nút có màu sẽ tạo điểm nhấn về mặt hình ảnh và phù hợp với các hành động như "Thêm vào giỏ hàng" và "Đăng nhập".
Đối với các thao tác quan trọng nhưng không phải là thao tác chính. Các nút có đường viền kết hợp tốt với các nút khác để biểu thị các hành động phụ, thay thế như "Huỷ" hoặc "Quay lại".
Đối với các hành động ít quan trọng hơn như đường liên kết điều hướng hoặc hành động phụ như "Tìm hiểu thêm" hoặc "Xem chi tiết".
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Tạo nút được tô màu nền
Thành phần nút được tô màu sử dụng thành phần kết hợp Button cơ bản. Theo mặc định, hình này được tô bằng một màu đồng nhất.
Kết quả
Hình 1. Nút được tô màu nền.
Tạo nút có màu sắc đồng nhất
Thành phần nút tông màu được tô màu sử dụng thành phần kết hợp FilledTonalButton.
Theo mặc định, vùng này được tô bằng màu sắc.
Kết quả
Hình 2. Nút có sắc độ.
Tạo nút có đường viền
Thành phần nút có đường viền sử dụng thành phần kết hợp OutlinedButton. Theo mặc định, thành phần hiển thị này sẽ có đường viền.
Kết quả
Hình 3. Một nút có đường viền.
Tạo nút nâng cao
Thành phần nút nâng cao sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, nút này có một bóng đổ thể hiện hiệu ứng nâng và xuất hiện dưới dạng một nút được viền có bóng đổ.
Kết quả
Hình 4. Một nút nâng cao.
Tạo nút văn bản
Thành phần nút văn bản sử dụng thành phần kết hợp TextButton. Cho đến khi được nhấp vào,
nút này chỉ xuất hiện dưới dạng văn bản. Theo mặc định, hình dạng này không có đường viền hoặc màu nền đồng nhất.
Kết quả
Hình 5. Một nút văn bản.
Điểm chính
onClick: Hàm được gọi khi người dùng nhấn vào nút.
enabled: Khi có giá trị false, tham số này sẽ khiến nút không xuất hiện và không hoạt động.
colors: Một thực thể của ButtonColors xác định màu sắc được sử dụng trong nút.
contentPadding: Khoảng đệm trong nút.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Hiển thị các thành phần tương tác
Tìm hiểu cách các hàm có khả năng kết hợp giúp bạn dễ dàng tạo các thành phần giao diện người dùng đẹp mắt dựa trên hệ thống thiết kế Material Design.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-06 UTC.
[null,null,["Cập nhật lần gần đây nhất: 2025-02-06 UTC."],[],[],null,["# Create a button\n\n\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---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nCreate a filled button\n----------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledButtonExample(onClick: () -\u003e Unit) {\n Button(onClick = { onClick() }) {\n Text(\"Filled\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L58-L63\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 1.** A filled button.\n\nCreate a filled tonal button\n----------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun FilledTonalButtonExample(onClick: () -\u003e Unit) {\n FilledTonalButton(onClick = { onClick() }) {\n Text(\"Tonal\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L67-L72\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 2.** A tonal button.\n\nCreate an outlined button\n-------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun OutlinedButtonExample(onClick: () -\u003e Unit) {\n OutlinedButton(onClick = { onClick() }) {\n Text(\"Outlined\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L85-L90\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 3.** An outlined button.\n\nCreate an elevated button\n-------------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun ElevatedButtonExample(onClick: () -\u003e Unit) {\n ElevatedButton(onClick = { onClick() }) {\n Text(\"Elevated\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L76-L81\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 4.** An elevated button.\n\nCreate a text button\n--------------------\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\n\u003cbr /\u003e\n\n```kotlin\n@Composable\nfun TextButtonExample(onClick: () -\u003e Unit) {\n TextButton(\n onClick = { onClick() }\n ) {\n Text(\"Text Button\")\n }\n}\n \n https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/components/Button.kt#L94-L101\n \n```\n\n\u003cbr /\u003e\n\n### Results\n\n**Figure 5.** A text button.\n\nKey points\n----------\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-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display interactive components\n\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\n--------------------------\n\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)"]]
