ButtonKt

Added in 1.3.0-alpha08

public final class ButtonKt

Summary

Public methods
static final @NonNull LayoutElementBuilders.LayoutElement
avatarButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatarContent,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @NonNull AvatarButtonStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 pill shape avatar button that offers up to three slots to take content representing vertically stacked label and secondary label, and an image (avatar) next to it.
static final @NonNull LayoutElementBuilders.LayoutElement
button(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull ButtonStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 pill shape button that offers up to three slots to take content representing vertically stacked label and secondary label, and an icon next to it.
static final @NonNull LayoutElementBuilders.LayoutElement
compactButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 compact button that offers up to two slots to take horizontally stacked content representing an icon and text next to it.
static final @NonNull LayoutElementBuilders.LayoutElement

Opinionated ProtoLayout Material3 icon button that offers a single slot to take content representing icon, for example icon.
static final @NonNull LayoutElementBuilders.LayoutElement

ProtoLayout Material3 clickable image button that doesn't offer additional slots, only image (for example backgroundImage as a background.
static final @NonNull LayoutElementBuilders.LayoutElement

Opinionated ProtoLayout Material3 text button that offers a single slot to take content representing short text, for example text.

Public methods

avatarButton

public static final @NonNull LayoutElementBuilders.LayoutElement avatarButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatarContent,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @NonNull AvatarButtonStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 pill shape avatar button that offers up to three slots to take content representing vertically stacked label and secondary label, and an image (avatar) next to it.

Difference from the button is that this one takes an image instead of an icon and spaces the content proportionally, so that edge of the button nicely hugs the avatar image.

import androidx.wear.protolayout.material3.avatarButton
import androidx.wear.protolayout.material3.avatarImage
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

avatarButton(
        onClick = clickable(),
        modifier = LayoutModifier.contentDescription("Pill button"),
        avatarContent = { avatarImage("id") },
        labelContent = { text("Primary label".layoutString) },
        secondaryLabelContent = { text("Secondary label".layoutString) },
    )
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling text.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> avatarContent

The avatar slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling avatarImage with the resource ID. Width and height of this element should be set to expand.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling text.
@NonNull DimensionBuilders.ContainerDimension height

The height of this button. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the button's shape, in other words the corner radius for this button. If changing these to radius smaller than Shapes.medium, it is important to adjusts the margins of primaryLayout used to accommodate for more space, for example by using maxPrimaryLayoutMargins. Or, if the shape is set to Shapes.full, using minPrimaryLayoutMargins can be considered.
@NonNull ButtonColors colors

The colors used for this button. If not set, ButtonDefaults.filledButtonColors will be used as high emphasis button. Other recommended colors are ButtonDefaults.filledTonalButtonColors and ButtonDefaults.filledVariantButtonColors. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
@NonNull AvatarButtonStyle style

The style which provides the attribute values required for constructing this pill shape button and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
int horizontalAlignment

The horizontal placement of the avatarContent. This should be HORIZONTAL_ALIGN_START to place the avatarContent on the start side of the button, or HORIZONTAL_ALIGN_END to place in on the end side. HORIZONTAL_ALIGN_CENTER will be ignored and replaced with HORIZONTAL_ALIGN_START.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the button's edge. It's highly recommended to keep the default. Only vertical values would be used, as horizontally elements are spaced out proportionally to the buttons width.

button

public static final @NonNull LayoutElementBuilders.LayoutElement button(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull ButtonStyle style,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 pill shape button that offers up to three slots to take content representing vertically stacked label and secondary label, and an icon next to it.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                button(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("Pill shape button"),
                    width = expand(),
                    height = expand(),
                    labelContent = { text("First label".layoutString) },
                    secondaryLabelContent = { text("Second label".layoutString) },
                    iconContent = { icon("id") }
                )
            }
        )
    }
 
import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.LayoutElementBuilders.Box
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.backgroundColor
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                // Button with custom content inside
                button(
                    onClick = clickable,
                    modifier =
                        LayoutModifier.contentDescription("Big button with image background")
                            .backgroundColor(colorScheme.primary),
                    width = expand(),
                    height = expand(),
                    labelContent = {
                        // This can be further built.
                        Box.Builder().build()
                    }
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling text.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> secondaryLabelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling text.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent

The icon slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling icon with the resource ID.
@NonNull DimensionBuilders.ContainerDimension width

The width of this button. It's highly recommended to set this to expand or weight
@NonNull DimensionBuilders.ContainerDimension height

The height of this button. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the button's shape, in other words the corner radius for this button. If changing these to radius smaller than Shapes.medium, it is important to adjusts the margins of primaryLayout used to accommodate for more space, for example by using maxPrimaryLayoutMargins. Or, if the shape is set to Shapes.full, using minPrimaryLayoutMargins can be considered.
@NonNull ButtonColors colors

The colors used for this button. If not set, ButtonDefaults.filledButtonColors will be used as high emphasis button. Other recommended colors are ButtonDefaults.filledTonalButtonColors and ButtonDefaults.filledVariantButtonColors. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the button. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified ButtonColors.containerColor behind it.
@NonNull ButtonStyle style

The style which provides the attribute values required for constructing this pill shape button and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
int horizontalAlignment

The horizontal placement of the labelContent and secondaryLabelContent content. If iconContent is present, this should be HORIZONTAL_ALIGN_START. Defaults to HORIZONTAL_ALIGN_CENTER if only labelContent is present, otherwise it default to HORIZONTAL_ALIGN_START.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the button's edge. It's highly recommended to keep the default.

compactButton

public static final @NonNull LayoutElementBuilders.LayoutElement compactButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    int horizontalAlignment,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 compact button that offers up to two slots to take horizontally stacked content representing an icon and text next to it.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.compactButton
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                compactButton(
                    onClick = clickable,
                    modifier = LayoutModifier.contentDescription("Compact button"),
                    width = expand(),
                    labelContent = { text("Action".layoutString) },
                    iconContent = { icon("id") }
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by calling text with only the text data parameter.
@ExtensionFunctionType Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent

The icon slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling icon with the resource ID.
@NonNull DimensionBuilders.ContainerDimension width

The width of this button. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the button's shape, in other words the corner radius for this button. If changing these to radius smaller than Shapes.medium, it is important to adjusts the margins of primaryLayout used to accommodate for more space, for example by using maxPrimaryLayoutMargins. Or, if the shape is set to Shapes.full, using minPrimaryLayoutMargins can be considered.
@NonNull ButtonColors colors

The colors used for this button. If not set, ButtonDefaults.filledButtonColors will be used as high emphasis button. Other recommended colors are ButtonDefaults.filledTonalButtonColors and ButtonDefaults.filledVariantButtonColors. If using custom colors, it is important to choose colors from the same role to ensure accessibility with sufficient color contrast.
int horizontalAlignment

The horizontal placement of the labelContent and iconContent content. If both are present, this should be HORIZONTAL_ALIGN_START or HORIZONTAL_ALIGN_END (in which case iconContent would be on the start or end side, respectively). Defaults to HORIZONTAL_ALIGN_CENTER if only labelContent or iconContent is present, otherwise it default to HORIZONTAL_ALIGN_START.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the button's edge. It's highly recommended to keep the default.

iconButton

public static final @NonNull LayoutElementBuilders.LayoutElement iconButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @NonNull IconButtonStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 icon button that offers a single slot to take content representing icon, for example icon.

The button is usually either a circular shape with the same width and height, or highly recommended stadium shape occupying available space with width and height set to expand or weight, usually used in the buttonGroup to arrange them

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textButton
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            iconContent = { icon("id1") }
                        )
                    }
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            iconContent = { icon("id2") }
                        )
                    }
                    buttonGroupItem {
                        textButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            labelContent = { text("Dec".layoutString) }
                        )
                    }
                }
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent

The icon slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling icon with the resource ID.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@NonNull DimensionBuilders.ContainerDimension width

The width of this button. It's highly recommended to set this to expand or weight
@NonNull DimensionBuilders.ContainerDimension height

The height of this button. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the button's shape, in other words the corner radius for this button. If changing these to radius smaller than Shapes.medium, it is important to adjusts the margins of primaryLayout used to accommodate for more space, for example by using maxPrimaryLayoutMargins. Or, if the shape is set to Shapes.full, using minPrimaryLayoutMargins can be considered.
@NonNull ButtonColors colors

The colors used for this button. If not set, ButtonDefaults.filledButtonColors will be used as high emphasis button. Other recommended colors are ButtonDefaults.filledTonalButtonColors and ButtonDefaults.filledVariantButtonColors. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
@NonNull IconButtonStyle style

The style which provides the attribute values required for constructing this icon button and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the button's edge. It's highly recommended to keep the default.

imageButton

public static final @NonNull LayoutElementBuilders.LayoutElement imageButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height
)

ProtoLayout Material3 clickable image button that doesn't offer additional slots, only image (for example backgroundImage as a background.

The button is usually stadium or circle shaped with fully rounded corners by default. It is highly recommended to set its width and height to fill the available space, by expand or weight for optimal experience across different screen sizes, and use buttonGroup to arrange them.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.backgroundImage
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.imageButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                imageButton(
                    onClick = clickable,
                    modifier =
                        LayoutModifier.contentDescription("Big button with image background"),
                    width = expand(),
                    height = expand(),
                    backgroundContent = { backgroundImage(protoLayoutResourceId = "id") }
                )
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> backgroundContent

The background object to be used behind the content in the button. It is recommended to use the default styling that is automatically provided by only calling backgroundImage with the content. It can be combined with the specified LayoutModifier.background behind it.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription. If LayoutModifier.background modifier is used and the the background image is also specified, the image will be laid out on top of this color. In case of the fully opaque background image, then the background color will not be shown.
@NonNull DimensionBuilders.ContainerDimension width

The width of this button. It's highly recommended to set this to expand or weight
@NonNull DimensionBuilders.ContainerDimension height

The height of this button. It's highly recommended to set this to expand or weight

textButton

public static final @NonNull LayoutElementBuilders.LayoutElement textButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent,
    @NonNull LayoutModifier modifier,
    @NonNull DimensionBuilders.ContainerDimension width,
    @NonNull DimensionBuilders.ContainerDimension height,
    @NonNull ModifiersBuilders.Corner shape,
    @NonNull ButtonColors colors,
    @NonNull TextButtonStyle style,
    @NonNull ModifiersBuilders.Padding contentPadding
)

Opinionated ProtoLayout Material3 text button that offers a single slot to take content representing short text, for example text.

The button is usually either a circular shape with the same width and height, or highly recommended stadium shape occupying available space with width and height set to expand or weight, usually used in the buttonGroup to arrange them.

import androidx.wear.protolayout.DimensionBuilders.expand
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.buttonGroup
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconButton
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.primaryLayout
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textButton
import androidx.wear.protolayout.modifiers.LayoutModifier
import androidx.wear.protolayout.modifiers.clickable
import androidx.wear.protolayout.modifiers.contentDescription
import androidx.wear.protolayout.types.layoutString

materialScope(context, deviceConfiguration) {
        primaryLayout(
            mainSlot = {
                buttonGroup {
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            iconContent = { icon("id1") }
                        )
                    }
                    buttonGroupItem {
                        iconButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            iconContent = { icon("id2") }
                        )
                    }
                    buttonGroupItem {
                        textButton(
                            onClick = clickable,
                            modifier =
                                LayoutModifier.contentDescription(
                                    "Big button with image background"
                                ),
                            width = expand(),
                            height = expand(),
                            shape = shapes.large,
                            labelContent = { text("Dec".layoutString) }
                        )
                    }
                }
            }
        )
    }
Parameters
@NonNull ModifiersBuilders.Clickable onClick

Associated Clickable for click events. When the button is clicked it will fire the associated action.
@ExtensionFunctionType @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent

The text slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling text. This should be small text, usually up to 3 characters text.
@NonNull LayoutModifier modifier

Modifiers to set to this element. It's highly recommended to set a content description using contentDescription.
@NonNull DimensionBuilders.ContainerDimension width

The width of this button. It's highly recommended to set this to expand or weight
@NonNull DimensionBuilders.ContainerDimension height

The height of this button. It's highly recommended to set this to expand or weight
@NonNull ModifiersBuilders.Corner shape

Defines the button's shape, in other words the corner radius for this button. If changing these to radius smaller than Shapes.medium, it is important to adjusts the margins of primaryLayout used to accommodate for more space, for example by using maxPrimaryLayoutMargins. Or, if the shape is set to Shapes.full, using minPrimaryLayoutMargins can be considered.
@NonNull ButtonColors colors

The colors used for this button. If not set, ButtonDefaults.filledButtonColors will be used as high emphasis button. Other recommended colors are ButtonDefaults.filledTonalButtonColors and ButtonDefaults.filledVariantButtonColors. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast.
@NonNull TextButtonStyle style

The style which provides the attribute values required for constructing this text button and its inner content. It also provides default style for the inner content, that can be overridden by each content slot.
@NonNull ModifiersBuilders.Padding contentPadding

The inner padding used to prevent inner content from being too close to the button's edge. It's highly recommended to keep the default.