# EdgeButtonKt

Added in 1.3.0

*** ** * ** ***


```
public final class EdgeButtonKt
```

<br />

*** ** * ** ***

## Summary

| ### Public methods |
|---|---|
| `static final @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement` | `https://developer.android.com/reference/androidx/wear/protolayout/material3/EdgeButtonKt#(androidx.wear.protolayout.material3.MaterialScope).iconEdgeButton(androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.modifiers.LayoutModifier,androidx.wear.protolayout.material3.ButtonColors,kotlin.Function1)( @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope receiver, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable onClick, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/modifiers/LayoutModifier modifier, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonColors colors, @https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement> iconContent )` ProtoLayout Material3 component edge button that offers a single slot to take an icon or similar round, small content. |
| `static final @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement` | `https://developer.android.com/reference/androidx/wear/protolayout/material3/EdgeButtonKt#(androidx.wear.protolayout.material3.MaterialScope).textEdgeButton(androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.modifiers.LayoutModifier,androidx.wear.protolayout.material3.ButtonColors,kotlin.Function1)( @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope receiver, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable onClick, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/modifiers/LayoutModifier modifier, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonColors colors, @https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement> labelContent )` ProtoLayout Material3 component edge button that offers a single slot to take a text or similar long and wide content. |

## Public methods

### iconEdgeButton

Artifact: [androidx.wear.protolayout:protolayout-material3](https://developer.android.com/jetpack/androidx/releases/wear-protolayout) [View Source](https://cs.android.com/search?q=file:androidx/wear/protolayout/material3/EdgeButton.kt+function:iconEdgeButton)

```
public static final @NonNull LayoutElementBuilders.LayoutElement iconEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @NonNull ButtonColors colors,
    @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> iconContent
)
```

ProtoLayout Material3 component edge button that offers a single slot to take an icon or similar round, small content.

The edge button is intended to be used at the bottom of a round screen. It has a special shape with its bottom almost follows the screen's curvature. It has fixed height, and takes 1 line of icon. This button represents the most important action on the screen, and it must occupy the whole horizontal space in its position as well as being anchored to the screen bottom.

This component is not intended to be used with an image background.

The button's `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).iconEdgeButton(androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.modifiers.LayoutModifier,androidx.wear.protolayout.material3.ButtonColors,kotlin.Function1)` default to using `https://developer.android.com/reference/androidx/wear/protolayout/material3/ColorScheme` from the `https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope` it's defined in, which defaults to `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#dynamicColorScheme(android.content.Context,androidx.wear.protolayout.material3.ColorScheme)`, meaning that the colors follow system theme if available on device. If not, or switched off by user, uses fallback `https://developer.android.com/reference/androidx/wear/protolayout/material3/ColorScheme` defined in its `https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope`.

See [common-layouts/tiles](https://developer.android.com/design/ui/wear/guides/foundations/common-layouts/tiles) and [bestpractices](https://developer.android.com/design/ui/wear/guides/surfaces/tiles/bestpractices) for more visuals and design recommendations.

```kotlin
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.icon
import androidx.wear.protolayout.material3.iconEdgeButton
import androidx.wear.protolayout.material3.materialScope
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) {
        iconEdgeButton(
            onClick = clickable,
            modifier = LayoutModifier.contentDescription("Description of a button"),
        ) {
            icon(protoLayoutResourceId = "id")
        }
    }
```

| Parameters |
|---|---|
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable onClick` | Associated `https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable` for click events. When the button is clicked it will fire the associated action. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/modifiers/LayoutModifier modifier` | Modifiers to set to this element. It's highly recommended to set a content description using `https://developer.android.com/reference/androidx/wear/protolayout/modifiers/package-summary#(androidx.wear.protolayout.modifiers.LayoutModifier).contentDescription(kotlin.String,androidx.wear.protolayout.expression.DynamicBuilders.DynamicString)`. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonColors colors` | The colors used for this button. If not set, `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledButtonColors()` will be used as high emphasis button. Other recommended colors are `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledTonalButtonColors()` and `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledVariantButtonColors()`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/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 `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).icon(androidx.wear.protolayout.ResourceBuilders.ImageResource,kotlin.String,androidx.wear.protolayout.DimensionBuilders.ImageDimension,androidx.wear.protolayout.DimensionBuilders.ImageDimension,androidx.wear.protolayout.types.LayoutColor)` with the resource ID. |

### textEdgeButton

Artifact: [androidx.wear.protolayout:protolayout-material3](https://developer.android.com/jetpack/androidx/releases/wear-protolayout) [View Source](https://cs.android.com/search?q=file:androidx/wear/protolayout/material3/EdgeButton.kt+function:textEdgeButton)

```
public static final @NonNull LayoutElementBuilders.LayoutElement textEdgeButton(
    @NonNull MaterialScope receiver,
    @NonNull ModifiersBuilders.Clickable onClick,
    @NonNull LayoutModifier modifier,
    @NonNull ButtonColors colors,
    @NonNull Function1<@NonNull MaterialScope, @NonNull LayoutElementBuilders.LayoutElement> labelContent
)
```

ProtoLayout Material3 component edge button that offers a single slot to take a text or similar long and wide content.

The edge button is intended to be used at the bottom of a round screen. It has a special shape with its bottom almost follows the screen's curvature. It has fixed height, and takes 1 line of text. This button represents the most important action on the screen, and it must occupy the whole horizontal space in its position as well as being anchored to the screen bottom.

This component is not intended to be used with an image background.

The button's `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).textEdgeButton(androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.modifiers.LayoutModifier,androidx.wear.protolayout.material3.ButtonColors,kotlin.Function1)` default to using `https://developer.android.com/reference/androidx/wear/protolayout/material3/ColorScheme` from the `https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope` it's defined in, which defaults to `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#dynamicColorScheme(android.content.Context,androidx.wear.protolayout.material3.ColorScheme)`, meaning that the colors follow system theme if available on device. If not, or switched off by user, uses fallback `https://developer.android.com/reference/androidx/wear/protolayout/material3/ColorScheme` defined in its `https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope`.

See [common-layouts/tiles](https://developer.android.com/design/ui/wear/guides/foundations/common-layouts/tiles) and [bestpractices](https://developer.android.com/design/ui/wear/guides/surfaces/tiles/bestpractices) for more visuals and design recommendations.

```kotlin
import androidx.wear.protolayout.material3.button
import androidx.wear.protolayout.material3.materialScope
import androidx.wear.protolayout.material3.text
import androidx.wear.protolayout.material3.textEdgeButton
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) {
        textEdgeButton(
            onClick = clickable,
            modifier = LayoutModifier.contentDescription("Description of a button"),
        ) {
            text("Hello".layoutString)
        }
    }
```

| Parameters |
|---|---|
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable onClick` | Associated `https://developer.android.com/reference/androidx/wear/protolayout/ModifiersBuilders.Clickable` for click events. When the button is clicked it will fire the associated action. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/modifiers/LayoutModifier modifier` | Modifiers to set to this element. It's highly recommended to set a content description using `https://developer.android.com/reference/androidx/wear/protolayout/modifiers/package-summary#(androidx.wear.protolayout.modifiers.LayoutModifier).contentDescription(kotlin.String,androidx.wear.protolayout.expression.DynamicBuilders.DynamicString)`. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonColors colors` | The colors used for this button. If not set, `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledButtonColors()` will be used as high emphasis button. Other recommended colors are `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledTonalButtonColors()` and `https://developer.android.com/reference/androidx/wear/protolayout/material3/ButtonDefaults#(androidx.wear.protolayout.material3.MaterialScope).filledVariantButtonColors()`. If using custom colors, it is important to choose a color pair from same role to ensure accessibility with sufficient color contrast. |
| `@https://developer.android.com/reference/androidx/annotation/NonNull Function1<@https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/material3/MaterialScope, @https://developer.android.com/reference/androidx/annotation/NonNull https://developer.android.com/reference/androidx/wear/protolayout/LayoutElementBuilders.LayoutElement> labelContent` | The label slot for content displayed in this button. It is recommended to use default styling that is automatically provided by only calling `https://developer.android.com/reference/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).text(androidx.wear.protolayout.types.LayoutString,androidx.wear.protolayout.modifiers.LayoutModifier,kotlin.Int,androidx.wear.protolayout.types.LayoutColor,kotlin.Boolean,kotlin.Boolean,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Int,kotlin.collections.List,kotlin.collections.List)` with the content. |