按鈕

按鈕是基本元件，可讓使用者觸發定義的動作。按鈕共有五種類型。下表說明五種按鈕類型的外觀，以及使用時機：

類型 外觀 目的
實心 純色背景，搭配對比色文字。 高強調按鈕。這些按鈕用於應用程式中的主要動作，例如「提交」和「儲存」。陰影效果可突顯按鈕的重要性。
實心色調 背景顏色會隨表面而變化。 也適用於主要或重要動作。填滿色調按鈕可提供更多視覺權重，適合「加入購物車」和「登入」等功能。
偏高 有陰影，因此較為醒目。 用途與色調按鈕類似。提高高度，讓按鈕更醒目。
有外框 有邊框，但沒有填滿。 中強調按鈕，包含重要但非主要的動作。這類按鈕通常會與其他按鈕搭配使用，用於指出「取消」或「返回」等次要動作。
文字 顯示沒有背景或邊框的文字。 低強調按鈕，適合用於較不重要的動作，例如導覽連結，或「瞭解詳情」或「查看詳細資料」等次要功能。

這張圖片展示 Material Design 的五種按鈕類型：

五種按鈕元件的範例，並醒目顯示各自的獨特特徵。
圖 1. 五個按鈕元件。

API 介面

onClick
使用者按下按鈕時，系統呼叫的函式。
enabled
當 false 時，這個參數會使按鈕顯示為無法使用且處於停用狀態。
colors
ButtonColors 的例項，用於決定按鈕使用的顏色。
contentPadding
按鈕內的邊框間距。

填滿按鈕

填滿按鈕元件會使用基本的 Button 可組合項。預設會填滿純色。以下程式碼片段說明如何實作元件，並以互動方式預覽：

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

填滿色調按鈕

填滿色調按鈕元件使用 FilledTonalButton 可組合函式。預設會填滿色調顏色。

以下程式碼片段說明如何實作元件，並以互動方式預覽：

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

外框按鈕

外框按鈕元件使用 OutlinedButton 可組合函式。根據預設，這個按鈕會顯示外框。

以下程式碼片段說明如何實作元件，並以互動方式預覽：

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

浮凸按鈕

浮動按鈕元件會使用 ElevatedButton 可組合函式。根據預設，它具有代表高度效果的陰影。這是一種填滿按鈕，包含陰影。

以下程式碼片段說明如何實作元件，並以互動方式預覽：

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

文字按鈕

文字按鈕元件使用 TextButton 可組合函式。在按下之前，只會顯示文字。根據預設，這個圖示沒有實心填滿或外框。

以下程式碼片段說明如何實作元件，並以互動方式預覽：

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

其他資源