OutlinedCompactButton
Android
Component in Wear Material Compose
Wear Material [OutlinedCompactButton] that offers a single slot to take any content (text, icon or image).
The [OutlinedCompactButton] has background size [ButtonDefaults.ExtraSmallButtonSize]. There is an transparent padding around the background, defaulted to [ButtonDefaults.CompactButtonBackgroundPadding], which increases the clickable area. Icon content should have size [ButtonDefaults.SmallIconSize].
An [OutlinedCompactButton] has a transparent background and a thin border by default with content taking the theme primary color.
[OutlinedCompactButton]s can be enabled or disabled. A disabled button will not respond to click events.
Last updated:
Installation
dependencies {
implementation("androidx.wear.compose:compose-material:1.5.0-alpha03")
}
Overloads
@Composable
fun OutlinedCompactButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
backgroundPadding: Dp = ButtonDefaults.CompactButtonBackgroundPadding,
interactionSource: MutableInteractionSource? = null,
shape: Shape = CircleShape,
border: ButtonBorder = ButtonDefaults.outlinedButtonBorder(),
content: @Composable BoxScope.() -> Unit,
)
Parameters
name | description |
---|---|
onClick | Will be called when the user clicks the button. |
modifier | Modifier to be applied to the button. |
enabled | Controls the enabled state of the button. When false , this button will not be clickable. |
colors | [ButtonColors] that will be used to resolve the background and content color for this button in different states. See [ButtonDefaults.outlinedButtonColors]. |
backgroundPadding | Increases the transparent clickable area around the background, defaults to [ButtonDefaults.CompactButtonBackgroundPadding] |
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. |
shape | Defines the button's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme. |
border | [ButtonBorder] that will be used to resolve the button border in different states. See [ButtonDefaults.outlinedButtonBorder]. |
content | The content displayed on the [OutlinedCompactButton] such as text, icon or image. |
Code Example
OutlinedCompactButtonWithIcon
@Composable
fun OutlinedCompactButtonWithIcon() {
OutlinedCompactButton(
onClick = { /* Do something */ },
enabled = true,
) {
Icon(
painter = painterResource(id = R.drawable.ic_airplanemode_active_24px),
contentDescription = "airplane",
modifier =
Modifier.size(ButtonDefaults.SmallIconSize)
.wrapContentSize(align = Alignment.Center),
)
}
}