← Compose Multiplatform Component in Wear Material 3 Compose
CompactButton
A Wear Material3 [CompactButton] that offers two slots and a specific layout for an icon and label. Both the icon and label are optional however it is expected that at least one will be provided.
The [CompactButton] is Stadium shaped and has a max height designed to take no more than one line of text and/or one icon. The default max height is [ButtonDefaults.CompactButtonHeight]. This includes a visible button height of 32.dp and 8.dp of padding above and below the button in order to meet accessibility guidelines that request a minimum of 48.dp height and width of tappable area.
If an icon is provided then the labels should be "start" aligned, e.g. left aligned in left-to-right mode so that the text starts next to the icon.
The items are laid out as follows.
If a label is provided then the button will be laid out with the optional icon at the start of a row followed by the label with a default max height of [ButtonDefaults.CompactButtonHeight].
If only an icon is provided it will be laid out vertically and horizontally centered with a default height of [ButtonDefaults.CompactButtonHeight] and the default width of [ButtonDefaults.IconOnlyCompactButtonWidth]
If neither icon nor label is provided then the button will displayed like an icon only button but with no contents or background color.
[CompactButton] takes the [ButtonDefaults.buttonColors] color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen.
Other recommended [ButtonColors] for different levels of emphasis are: [ButtonDefaults.filledTonalButtonColors], [ButtonDefaults.outlinedButtonColors] and [ButtonDefaults.childButtonColors]. Buttons can also take an image background using [ButtonDefaults.imageBackgroundButtonColors].
[CompactButton] can be enabled or disabled. A disabled button will not respond to click events.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material3:1.0.0-alpha23")
}
Overloads
@Composable
fun CompactButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
icon: (@Composable BoxScope.() -> Unit)? = null,
enabled: Boolean = true,
shape: Shape = CompactButtonTokens.ContainerShape.value,
colors: ButtonColors = ButtonDefaults.buttonColors(),
border: BorderStroke? = null,
contentPadding: PaddingValues = ButtonDefaults.CompactButtonContentPadding,
interactionSource: MutableInteractionSource? = null,
label: (@Composable RowScope.() -> Unit)? = null,
)
Parameters
name | description |
---|---|
onClick | Will be called when the user clicks the button |
modifier | Modifier to be applied to the button |
label | A slot for providing the button's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "center" aligned if not. |
icon | A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size [ButtonDefaults.SmallIconSize] when used with a label or [ButtonDefaults.IconSize] when used as the only content in the button. |
colors | [ButtonColors] that will be used to resolve the background and content color for this button in different states. See [ButtonDefaults.buttonColors]. |
enabled | Controls the enabled state of the button. When false , this button will not be clickable |
interactionSource | an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally. |
contentPadding | The spacing values to apply internally between the container and the content |
shape | Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material3 Theme |
border | Optional [BorderStroke] that will be used to resolve the border for this button in different states. |
Code Examples
CompactButtonSample
@Composable
@Sampled
fun CompactButtonSample() {
CompactButton(
onClick = { /* Do something */ },
icon = {
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite icon",
modifier = Modifier.size(ButtonDefaults.SmallIconSize)
)
}
) {
Text("Compact Button", maxLines = 1, overflow = TextOverflow.Ellipsis)
}
}
FilledTonalCompactButtonSample
@Composable
@Sampled
fun FilledTonalCompactButtonSample() {
CompactButton(
onClick = { /* Do something */ },
icon = {
Icon(
Icons.Filled.Favorite,
contentDescription = "Favorite icon",
modifier = Modifier.size(ButtonDefaults.SmallIconSize)
)
},
colors = ButtonDefaults.filledTonalButtonColors()
) {
Text("Filled Tonal Compact Button", maxLines = 1, overflow = TextOverflow.Ellipsis)
}
}
OutlinedCompactButtonSample
@Composable
@Sampled
fun OutlinedCompactButtonSample() {
CompactButton(
onClick = { /* Do something */ },
icon = {
Icon(
Icons.Filled.ArrowDropDown,
contentDescription = "Expand",
modifier = Modifier.size(ButtonDefaults.SmallIconSize)
)
},
colors = ButtonDefaults.outlinedButtonColors(),
border = ButtonDefaults.outlinedButtonBorder(enabled = true)
) {
Text("Show More", maxLines = 1, overflow = TextOverflow.Ellipsis)
}
}