---
title: "RemoteEdgeButton"
description: "Wear Material 3 [RemoteEdgeButton] that offers a single slot to take any content."
type: "composable"
lastmod: "2026-09-24"
---
## API Reference

### RemoteEdgeButton

> Source set: Android

```kotlin
@Composable
public fun RemoteEdgeButton(
    onClick: Action,
    modifier: RemoteModifier = RemoteModifier,
    buttonSize: RemoteEdgeButtonSize = RemoteEdgeButtonSize.Small,
    enabled: RemoteBoolean = true.rb,
    colors: RemoteButtonColors = RemoteEdgeButtonDefaults.buttonColors(),
    border: RemoteDp? = null,
    borderColor: RemoteColor? = null,
    shape: RemoteShape = RemoteEdgeButtonDefaults.shape(buttonSize),
    contentPadding: RemotePaddingValues = RemoteEdgeButtonDefaults.ContentPadding,
    content: @Composable @RemoteComposable RemoteRowScope.() -> Unit,
)
```

Wear Material 3 [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) that offers a single slot to take any content.

The [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) has a special shape designed for the bottom of the screen, as it almost
follows the screen's curvature, so it should be allowed to take the full width and touch the
bottom of the screen.

This button represents the most important action on the screen, and must take the whole width of
the screen as well as being anchored to the screen bottom. This assumes that the Remote Compose
Player is taking the full width of the screen.

[RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) has 4 standard sizes, taking 1 line of text for extra small, 2 for small and
medium, and 3 for large. Specify it using the `buttonSize` parameter. Optionally, a single icon
can be used instead of text.

[RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) takes the `RemoteEdgeButtonDefaults.buttonColors` color scheme by default,
with colored background, contrasting content color and no border. This is a high-emphasis button
for the primary, most important or most common action on a screen. Other possible colors for
different levels of emphasis are: filled tonal button which defaults to
`RemoteEdgeButtonDefaults.filledTonalButtonColors` and outlined button which defaults to
`RemoteEdgeButtonDefaults.outlinedButtonColors`.

[RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) can be enabled or disabled. A disabled button will not respond to click
events.

Example of a [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api):

Example of a [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) with an icon:

Example of a [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) with filled tonal colors:

Example of a [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton/api) with multi-line text:

#### Parameters

| | |
| --- | --- |
| onClick | Will be called when the user clicks the button. |
| modifier | Modifier to be applied to the button. Size-related modifiers should not be used directly on [RemoteEdgeButton](/jetpack-compose/androidx.wear.compose.remote/remote-material3/composable-functions/RemoteEdgeButton) to alter content sizing; the button is designed to take the full width of the screen and its height is determined by [buttonSize](/jetpack-compose/androidx.xr.glimmer/glimmer/classes/ButtonSize). When animating the button to appear/disappear, a height modifier can change the height of the component, but won't change the space available for the content. |
| buttonSize | The size of the button, defaults to `RemoteEdgeButtonSize.Small`. |
| enabled | Controls the enabled state of the button. When false, this component will not respond to user input. |
| colors | [RemoteButtonColors](/jetpack-compose/androidx.wear.compose.remote/remote-material3/classes/RemoteButtonColors) that will be used to resolve the colors used for this button. See [RemoteEdgeButtonDefaults.buttonColors](/jetpack-compose/androidx.wear.compose.remote/remote-material3/objects/RemoteEdgeButtonDefaults). |
| border | The border stroke width for the button. |
| borderColor | The color of the border. |
| shape | Defines the button's shape. Defaults to [RemoteEdgeButtonDefaults.shape](/jetpack-compose/androidx.wear.compose.remote/remote-material3/objects/RemoteEdgeButtonDefaults). |
| contentPadding | The spacing values to apply internally between the container and the content. |
| content | The content displayed inside the button. |

## Code Examples

### RemoteEdgeButtonSample

```kotlin
@Sampled
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteEdgeButtonSample(modifier: RemoteModifier = RemoteModifier) {
    val tapCount = rememberMutableRemoteInt(0)
    val countSuffix = " (".rs + tapCount.toRemoteString() + " taps)"

    RemoteEdgeButton(
        onClick = valueChange(tapCount, tapCount + 1),
        modifier = modifier,
        buttonSize = RemoteEdgeButtonSize.Small,
    ) {
        RemoteText("Tap me!".rs + countSuffix)
    }
}
```

### RemoteEdgeButtonIconSample

```kotlin
@Sampled
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteEdgeButtonIconSample(modifier: RemoteModifier = RemoteModifier) {
    val tapCount = rememberMutableRemoteInt(0)

    RemoteEdgeButton(
        onClick = valueChange(tapCount, tapCount + 1),
        modifier = modifier,
        buttonSize = RemoteEdgeButtonSize.ExtraSmall,
    ) {
        RemoteIcon(
            imageVector = TestImageVectors.VolumeUp,
            contentDescription = "Volume Up".rs,
            modifier =
                RemoteModifier.size(
                    RemoteEdgeButtonDefaults.iconSizeFor(RemoteEdgeButtonSize.ExtraSmall)
                ),
        )
    }
}
```

### RemoteEdgeButtonFilledTonalSample

```kotlin
@Sampled
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteEdgeButtonFilledTonalSample(modifier: RemoteModifier = RemoteModifier) {
    val tapCount = rememberMutableRemoteInt(0)

    RemoteEdgeButton(
        onClick = valueChange(tapCount, tapCount + 1),
        modifier = modifier,
        buttonSize = RemoteEdgeButtonSize.Medium,
        colors = RemoteEdgeButtonDefaults.filledTonalButtonColors(),
    ) {
        RemoteText("Filled Tonal".rs)
    }
}
```

### RemoteEdgeButtonMultiLineSample

```kotlin
@Sampled
@Composable
@WearPreviewDevices
@PreviewWrapper(RemoteComponentPreviewWrapper::class)
fun RemoteEdgeButtonMultiLineSample(modifier: RemoteModifier = RemoteModifier) {
    val tapCount = rememberMutableRemoteInt(0)

    RemoteEdgeButton(
        onClick = valueChange(tapCount, tapCount + 1),
        modifier = modifier,
        buttonSize = RemoteEdgeButtonSize.Large,
    ) {
        RemoteText("Longer multi-line\nShort label".rs)
    }
}
```