按钮是允许用户触发已定义操作的基本组件。共有五种类型的按钮。下表描述了五种按钮类型的每个外观，以及您应该在何处使用它们。

类型	外观	用途
填充	实心背景，带有对比色文本。	高强调按钮。这些用于应用中的主要操作，例如“提交”和“保存”。阴影效果强调了按钮的重要性。
填充色调	背景颜色会根据表面变化而变化。	也适用于主要或重要的操作。填充按钮提供更强的视觉权重，适合诸如“添加到购物车”和“登录”之类的功能。
凸起	通过阴影脱颖而出。	与色调按钮的作用类似。增加凸起高度，使按钮显得更加突出。
描边	具有边框，没有填充。	中等强调按钮，包含重要但不是主要的操作。它们与其他按钮搭配使用，以指示替代的次要操作，如“取消”或“返回”。
文本	显示没有背景或边框的文本。	低强调按钮，非常适合不太重要的操作，例如导航链接或次要功能，如“了解更多”或“查看详情”。

下图演示了 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 文档