按钮

按钮是基本组件，可让用户触发已定义的操作。按钮有五种类型。下表介绍了五种按钮类型的外观以及您应该在何处使用它们：

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

此图片展示了 Material Design 中的五种按钮类型：

五个按钮组件的示例，其中突出显示了各自的独特特征。
图 1. 五个按钮组件。

API Surface

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")
    }
}

其他资源