Nút

Nút là thành phần cơ bản cho phép người dùng kích hoạt một hành động đã xác định. Có 5 loại nút. Bảng này mô tả giao diện của từng loại trong số 5 loại nút, cũng như vị trí bạn nên sử dụng các nút đó:

Loại Hình thức Mục đích
Lấp đầy (filled) Nền đồng màu với văn bản tương phản. Nút nhấn mạnh. Các nút này dành cho các hành động chính trong một ứng dụng, chẳng hạn như "gửi" và "lưu". Hiệu ứng đổ bóng làm nổi bật tầm quan trọng của nút.
Tô màu nền, sắc độ Màu nền thay đổi để phù hợp với vùng hiển thị. Cũng dành cho các hành động chính hoặc quan trọng. Nút có màu nền đậm mang lại trọng lượng thị giác lớn hơn và phù hợp với các chức năng như "thêm vào giỏ hàng" và "Đăng nhập".
Hơi cao Nổi bật nhờ có bóng. Phục vụ mục đích tương tự như nút có sắc độ. Tăng độ cao để nút xuất hiện nổi bật hơn nữa.
Đường viền (outlined) Có đường viền và không có màu nền. Nút nhấn mạnh trung bình, chứa các thao tác quan trọng nhưng không phải là thao tác chính. Các nút này kết hợp tốt với các nút khác để biểu thị các hành động thay thế, phụ như "Huỷ" hoặc "Quay lại".
Văn bản Hiển thị văn bản không có nền hoặc đường viền. Nút ít được nhấn mạnh, lý tưởng cho các hành động ít quan trọng hơn như đường liên kết điều hướng hoặc các chức năng phụ như "Tìm hiểu thêm" hoặc "Xem chi tiết".

Hình ảnh này minh hoạ 5 loại nút trong Material Design:

Ví dụ về từng thành phần trong số 5 thành phần nút, trong đó có nêu bật các đặc điểm riêng biệt của từng thành phần.
Hình 1. Năm thành phần nút.

Nền tảng API

onClick
Hàm mà hệ thống gọi khi người dùng nhấn vào nút.
enabled
Khi false, tham số này khiến nút có vẻ như không hoạt động và không hoạt động.
colors
Một thực thể của ButtonColors xác định màu sắc được dùng trong nút.
contentPadding
Khoảng đệm trong nút.

Nút đã tô màu nền

Thành phần nút có màu nền sử dụng thành phần kết hợp Button cơ bản. Theo mặc định, nền được tô bằng một màu đồng nhất. Đoạn mã này cho biết cách triển khai thành phần và xem trước thành phần đó theo cách tương tác:

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

Nút có màu nền và tông màu

Thành phần nút có tông màu đặc sử dụng thành phần kết hợp FilledTonalButton. Theo mặc định, vùng này được lấp đầy bằng một màu sắc.

Đoạn mã này cho biết cách triển khai thành phần và xem trước thành phần đó theo cách tương tác:

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

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 này sẽ xuất hiện cùng với một đường viền.

Đoạn mã này cho biết cách triển khai thành phần và xem trước thành phần đó theo cách tương tác:

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

Nút nổi

Thành phần nút nổi sử dụng thành phần kết hợp ElevatedButton. Theo mặc định, thành phần này có bóng đổ thể hiện hiệu ứng độ cao. Đây là nút có màu nền và có bóng.

Đoạn mã này cho biết cách triển khai thành phần và xem trước thành phần đó theo cách tương tác:

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

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. Nút này chỉ xuất hiện dưới dạng văn bản cho đến khi được nhấn. Theo mặc định, hình dạng này không có màu tô hoặc đường viền đồng màu.

Đoạn mã này cho biết cách triển khai thành phần và xem trước thành phần đó theo cách tương tác:

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

Tài nguyên khác