# RemoteEdgeButton

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)( onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction, modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier, buttonSize: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonSize, enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteButtonColors, border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke?, shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` that offers a single slot to take any content. |

## Functions

### RemoteEdgeButton

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

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

Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` that offers a single slot to take any content.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` 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.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/package-summary#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` parameter. Optionally, a single icon can be used instead of text.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` takes the `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonDefaults#filledTonalButtonColors()` and outlined button which defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonDefaults#outlinedButtonColors()`.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` can be enabled or disabled. A disabled button will not respond to click events.

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)`:

```kotlin
import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.MutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = remember { MutableRemoteInt(0) }
val countSuffix = " (".rs + tapCount.toRemoteString() + " taps)"

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

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` with an icon:

```kotlin
import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.size
import androidx.compose.remote.creation.compose.state.MutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonDefaults
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteIcon
import androidx.wear.compose.remote.material3.previews.utils.TestImageVectors

val tapCount = remember { MutableRemoteInt(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)
            ),
    )
}
```

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` with filled tonal colors:

```kotlin
import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.MutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonDefaults
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = remember { MutableRemoteInt(0) }

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

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` with multi-line text:

```kotlin
import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.MutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.runtime.remember
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = remember { MutableRemoteInt(0) }

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

| Parameters |
|---|---|
| `onClick: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/action/RemoteAction` | Will be called when the user clicks the button. |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/modifier/RemoteModifier = RemoteModifier` | Modifier to be applied to the button. Size-related modifiers should not be used directly on `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButton.composable#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)` to alter content sizing; the button is designed to take the full width of the screen and its height is determined by `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/package-summary#RemoteEdgeButton(androidx.compose.remote.creation.compose.action.RemoteAction,androidx.compose.remote.creation.compose.modifier.RemoteModifier,androidx.wear.compose.remote.material3.RemoteEdgeButtonSize,androidx.compose.remote.creation.compose.state.RemoteBoolean,androidx.wear.compose.remote.material3.RemoteButtonColors,androidx.wear.compose.remote.material3.RemoteBorderStroke,androidx.compose.remote.creation.compose.shapes.RemoteShape,androidx.compose.remote.creation.compose.layout.RemotePaddingValues,kotlin.Function1)`. 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: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonSize = RemoteEdgeButtonSize.Small` | The size of the button, defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonSize#Small()`. |
| `enabled: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/state/RemoteBoolean = true.rb` | Controls the enabled state of the button. When false, this component will not respond to user input. |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteButtonColors = RemoteEdgeButtonDefaults.buttonColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteButtonColors` that will be used to resolve the colors used for this button. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonDefaults#buttonColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteBorderStroke` that will be used to resolve the border for this button. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/shapes/RemoteShape = RemoteEdgeButtonDefaults.shape(buttonSize)` | Defines the button's shape. Defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/remote/material3/RemoteEdgeButtonDefaults#shape(androidx.wear.compose.remote.material3.RemoteEdgeButtonSize)`. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemotePaddingValues = RemoteEdgeButtonDefaults.ContentPadding` | The spacing values to apply internally between the container and the content. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable @https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteComposable https://developer.android.com/reference/kotlin/androidx/compose/remote/creation/compose/layout/RemoteRowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content displayed inside the button. |