按鈕

按鈕是基本元件，可讓使用者觸發已定義的動作。按鈕共有五種類型。下表說明這五種按鈕類型的外觀及適用位置。

類型	外觀	目的
實心	單色背景搭配對比鮮明的文字。	高強調按鈕。這些都代表應用程式的主要動作，例如「提交」和「儲存」。陰影效果可強調按鈕的重要性。
實心色調	背景顏色會因表面而異。	也適用於主要或重要動作實心按鈕可提供更多視覺重量和合適功能，例如「加入購物車」和「登入」。
偏高	看起來像陰影，代表著明顯。	適用於與色調按鈕類似的角色。調高高度，讓按鈕更醒目。
含外框	顯示未填滿的邊框。	中強調按鈕，內含重要但不是主要動作。這些按鈕可以與其他按鈕配對，用於指出次要的替代動作，例如「取消」或「返回」。
Text	顯示沒有背景或框線的文字。	低強調按鈕，適用於較不重要的動作 (例如導覽連結)，或「瞭解詳情」或「查看詳細資料」等次要功能。

下圖說明 Material Design 中的五種按鈕類型。

API 介面

• 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 使用者介面說明文件