Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.
@Preview
@Composable
fun ButtonSample() {
Button(onClick = {}) { Text("Button") }
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun ButtonWithAnimatedShapeSample() {
Button(onClick = {}, shapes = ButtonDefaults.shapes()) { Text("Button") }
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun ButtonWithIconSample() {
Button(
onClick = { /* Do something! */ },
contentPadding =
ButtonDefaults.contentPaddingFor(ButtonDefaults.MinHeight, hasStartIcon = true),
) {
Icon(
Icons.Filled.Favorite,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.iconSizeFor(ButtonDefaults.MinHeight)),
)
Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(ButtonDefaults.MinHeight)))
Text("Like")
}
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun LargeButtonWithIconSample() {
val size = ButtonDefaults.LargeContainerHeight
Button(
onClick = { /* Do something! */ },
modifier = Modifier.heightIn(size),
contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
)
Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
Text("Label", style = ButtonDefaults.textStyleFor(size))
}
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun MediumButtonWithIconSample() {
val size = ButtonDefaults.MediumContainerHeight
Button(
onClick = { /* Do something! */ },
modifier = Modifier.heightIn(size),
contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
)
Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
Text("Label", style = ButtonDefaults.textStyleFor(size))
}
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SmallButtonSample() {
Button(onClick = { /* Do something! */ }, contentPadding = ButtonDefaults.SmallContentPadding) {
Text("Button")
}
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun SquareButtonSample() {
Button(onClick = { /* Do something! */ }, shape = ButtonDefaults.squareShape) { Text("Button") }
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun XLargeButtonWithIconSample() {
val size = ButtonDefaults.ExtraLargeContainerHeight
Button(
onClick = { /* Do something! */ },
modifier = Modifier.heightIn(size),
contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
)
Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
Text("Label", style = ButtonDefaults.textStyleFor(size))
}
}
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Preview
@Composable
fun XSmallButtonWithIconSample() {
val size = ButtonDefaults.ExtraSmallContainerHeight
Button(
onClick = { /* Do something! */ },
modifier = Modifier.heightIn(size),
contentPadding = ButtonDefaults.contentPaddingFor(size, hasStartIcon = true),
) {
Icon(
Icons.Filled.Edit,
contentDescription = "Localized description",
modifier = Modifier.size(ButtonDefaults.iconSizeFor(size)),
)
Spacer(Modifier.size(ButtonDefaults.iconSpacingFor(size)))
Text("Label")
}
}