Button

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

類型	外觀	目的
實心	純色背景搭配對比文字。	高強調按鈕。這些是應用程式中的主要動作，例如「提交」和「儲存」。陰影效果可強調按鈕的重要性。
填滿色調	背景顏色會根據表面而有所不同。	也適用於主要或重大動作。填滿的按鈕可提供更強的視覺重量，並適合用於「新增至購物車」和「登入」等功能。
偏高	加入陰影，讓圖片更醒目。	與色調按鈕類似的角色。增加升高值，讓按鈕更醒目。
含外框	邊框無填充。	中強調按鈕，包含重要但非主要的動作。這類按鈕與其他按鈕搭配使用時，可用於指出「取消」或「返回」等次要動作。
文字	顯示沒有背景或邊框的文字。	低強調按鈕，適用於較不重要的動作，例如導覽連結，或次要功能，例如「瞭解詳情」或「查看詳細資料」。

下圖顯示 Material Design 中的五種按鈕類型。

圖 1. 五個按鈕元件。

API 介面

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

填滿型按鈕

填滿的按鈕元件會使用基本 Button 可組合項。預設會以單色填滿。以下程式碼片段示範如何實作元件：

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

注意： 如要建立自訂按鈕，請使用 Button 可組合項。

此實作方式如下所示：

圖 2. 填滿型按鈕。

填滿色調的按鈕

填滿色調的按鈕元件會使用 FilledTonalButton 可組合項。預設會填入色調顏色。

下列程式碼片段示範如何實作元件：

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

此實作方式如下所示：

圖 3. 色調按鈕。

外框型按鈕

外框按鈕元件會使用 OutlinedButton 可組合項。預設會顯示為輪廓。

下列程式碼片段示範如何實作元件：

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

此實作方式如下所示：

圖 4. 外框型按鈕。

升起效果按鈕

升高的按鈕元件會使用 ElevatedButton 可組合函式。根據預設，它會顯示代表升高效果的陰影。請注意，這基本上是帶有陰影的輪廓按鈕。

下列程式碼片段示範如何實作元件：

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

此實作方式如下所示：

圖 5. 升起效果按鈕。

文字按鈕

文字按鈕元件會使用 TextButton 可組合函式。按下按鈕前，畫面上只會顯示文字。根據預設，它沒有實心填充或外框。

下列程式碼片段示範如何實作元件：

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

此實作方式如下所示：

圖 6. 文字按鈕。

其他資源

• 懸浮動作按鈕
• Material UI 說明文件