CompactButtonContent

Functions summary

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

Lays out the content of a CompactButton with support for an icon and a label.

Functions

CompactButtonContent

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

Lays out the content of a CompactButton with support for an icon and a label.

While the standard CompactButton overloads provide this layout out-of-the-box, CompactButtonContent can be used inside the CompactButton 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 CompactButtonContent 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.CompactButton
import androidx.wear.compose.material3.CompactButtonContent
import androidx.wear.compose.material3.CompactButtonDefaults
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("Compact Button") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }

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

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

A slot for providing the button's icon.
enabled: Boolean = true

Controls the enabled state of the button content.
colors: ButtonColors = ButtonDefaults.buttonColors()

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

A slot for providing the button's main label.