ButtonContent

Functions summary

Unit
@Composable
ButtonContent(
    modifier: Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)?,
    icon: (@Composable BoxScope.() -> Unit)?,
    enabled: Boolean,
    colors: ButtonColors,
    label: @Composable RowScope.() -> Unit
)

Lays out the content of a Button with support for an icon, a label, and a secondary label.

Functions

ButtonContent

@Composable
fun ButtonContent(
    modifier: Modifier = Modifier,
    secondaryLabel: (@Composable RowScope.() -> Unit)? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    label: @Composable RowScope.() -> Unit
): Unit

Lays out the content of a Button with support for an icon, a label, and a secondary label.

While the standard Button overloads provide this layout out-of-the-box, ButtonContent can be used inside the Button overload that takes a generic content to build custom button layouts (for example, to wrap the content in a gesture hint indicator like OneHandedGestureIndicator) while maintaining standard typography, colors, and spacing.

Example of a ButtonContent layout with OneHandedGestureIndicator:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.onClick
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonContent
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

var label by remember { mutableStateOf("Filled Button") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Button(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.oneHandedGesture(
                action = GestureAction.Primary,
                interactionSource = interactionSource,
                onGesture = onClick,
            ),
    ) {
        OneHandedGestureIndicator(
            interactionSource = interactionSource,
            gestureIndicatorTint = MaterialTheme.colorScheme.onPrimary,
        ) {
            ButtonContent(
                secondaryLabel = { Text("Secondary Label") },
                icon = {
                    Icon(
                        painter = painterResource(R.drawable.ic_favorite_rounded),
                        contentDescription = "Favorite icon",
                        modifier = Modifier.size(ButtonDefaults.IconSize),
                    )
                },
                colors = ButtonDefaults.buttonColors(),
                label = { Text(label) },
            )
        }
    }
}
Parameters
modifier: Modifier = Modifier

Modifier to be applied to the button content layout.
secondaryLabel: (@Composable RowScope.() -> Unit)? = null

A slot for providing the button's secondary label. The contents are expected to be text which is "start" aligned if there is an icon present and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.
icon: (@Composable BoxScope.() -> Unit)? = null

A slot for providing the button's icon. The contents are expected to be a horizontally and vertically aligned icon of size ButtonDefaults.IconSize or ButtonDefaults.LargeIconSize.
enabled: Boolean = true

Controls the enabled state of the button content. When false, the content will be displayed in a disabled style.
colors: ButtonColors = ButtonDefaults.buttonColors()

ButtonColors that will be used to resolve the content, secondary content, and icon colors in different states. See ButtonDefaults.buttonColors.
label: @Composable RowScope.() -> Unit

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 present and "start" or "center" aligned if not.