按鈕

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

類型	外觀	目的
實心	使用對比文字的純色背景。	高強調按鈕。這些控制項適用於應用程式中的主要動作，例如「提交」和「儲存」。陰影效果會強調按鈕的重要性。
實心色調	背景顏色會因表面而異。	主要或重要動作也適用。填滿按鈕則提供更為視覺效果和西裝功能，例如「加入購物車」和「登入」。
偏高	加上陰影以吸引目光。	適合類似的色調按鈕。增加高度，讓該按鈕以更醒目的方式顯示。
含外框	呈現未填滿的邊框。	中強調按鈕，包含非主要動作。可與其他按鈕完美搭配，用於指出替代的次要動作，例如「取消」或「返回」。
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 UI 文件