# EdgeButton

## 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/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, buttonSize: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButtonSize, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Wear Material3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that offers a single slot to take any content. |

## Functions

### EdgeButton

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

```
@Composable
fun EdgeButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: EdgeButtonSize = EdgeButtonSize.Small,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit
```

Wear Material3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` that offers a single slot to take any content.

The `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,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.

When used with a list, such as `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumn.composable#TransformingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.TransformingLazyColumnState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider,kotlin.Function1)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/ScalingLazyColumn.composable#ScalingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.ScalingLazyListState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.lazy.ScalingParams,androidx.wear.compose.foundation.lazy.ScalingLazyListAnchorType,androidx.wear.compose.foundation.lazy.AutoCenteringParams,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,kotlin.Function1)`, it is recommended to pass `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` into the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenScaffold.composable#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.OverscrollEffect,kotlin.Function2)`'s edgeButton slot, which grows and shrinks to take the available space after the scrollable content.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` has 4 standard sizes, taking 1 line of text for the extra small, 2 for small and medium, and 3 for the large. See the standard values on `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonDefaults`, and specify it using the buttonSize parameter. Optionally, a single icon can be used instead of the text.

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` takes the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonDefaults#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: `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/FilledTonalButton.composable#FilledTonalButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` which defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonDefaults#filledTonalButtonColors()` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/OutlinedButton.composable#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` which defaults to `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonDefaults#outlinedButtonColors()`

`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` is not intended to be used with an image background.

Edge button can be enabled or disabled. A disabled button will not respond to click events.

Example of an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButton.composable#EdgeButton(kotlin.Function0,androidx.compose.ui.Modifier,androidx.wear.compose.material3.EdgeButtonSize,kotlin.Boolean,androidx.wear.compose.material3.ButtonColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)` placed at the bottom of the screen:

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Check
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.EdgeButtonSize
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

Column(
    Modifier.fillMaxSize().padding(horizontal = 20.dp).padding(top = 16.dp),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Column(modifier = Modifier.weight(1f), verticalArrangement = Arrangement.Center) {
        Text(
            "EdgeButton hugs the bottom of the curved screen",
            modifier = Modifier.fillMaxWidth(),
            textAlign = TextAlign.Center,
        )
    }
    EdgeButton(onClick = { /* Do something */ }, buttonSize = EdgeButtonSize.Medium) {
        Icon(
            Icons.Filled.Check,
            contentDescription = "Check icon",
            modifier = Modifier.size(ButtonDefaults.IconSize),
        )
    }
}
```

Example of an EdgeButton with `https://developer.android.com/reference/kotlin/androidx/wear/compose/foundation/lazy/TransformingLazyColumn.composable#TransformingLazyColumn(androidx.compose.ui.Modifier,androidx.wear.compose.foundation.lazy.TransformingLazyColumnState,androidx.compose.foundation.layout.PaddingValues,kotlin.Boolean,androidx.compose.foundation.layout.Arrangement.Vertical,androidx.compose.ui.Alignment.Horizontal,androidx.compose.foundation.gestures.FlingBehavior,kotlin.Boolean,androidx.wear.compose.foundation.rotary.RotaryScrollableBehavior,androidx.compose.foundation.OverscrollEffect,androidx.wear.compose.foundation.lazy.TransformingLazyColumnFirstLayoutItemProvider,kotlin.Function1)` and `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ScreenScaffold.composable#ScreenScaffold(androidx.wear.compose.foundation.lazy.ScalingLazyListState,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.foundation.layout.PaddingValues,kotlin.Function1,androidx.compose.ui.unit.Dp,androidx.compose.foundation.OverscrollEffect,kotlin.Function2)`:

```kotlin
import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.scrollable
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.rememberOverscrollEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

// Declare just one [AppScaffold] per app such as in the activity.
// [AppScaffold] allows static screen elements (i.e. [TimeText]) to remain visible
// during in-app transitions such as swipe-to-dismiss.
AppScaffold(modifier = Modifier.background(Color.Black)) {
    val transformationSpec = rememberTransformationSpec()

    // Define the navigation hierarchy within the AppScaffold,
    // such as using SwipeDismissableNavHost.
    // For this sample, we will define a single screen inline.
    val listState = rememberTransformingLazyColumnState()
    // By default, ScreenScaffold will handle transitions showing/hiding ScrollIndicator,
    // showing/hiding/scrolling away TimeText and optionally hosting the EdgeButton.
    ScreenScaffold(
        scrollState = listState,
        // Define custom spacing between [EdgeButton] and [TransformingLazyColumn].
        edgeButtonSpacing = 15.dp,
        edgeButton = {
            EdgeButton(
                onClick = {},
                modifier =
                    // In case user starts scrolling from the EdgeButton.
                    Modifier.scrollable(
                        listState,
                        orientation = Orientation.Vertical,
                        reverseDirection = true,
                        // An overscroll effect should be applied to the EdgeButton for proper
                        // scrolling behavior.
                        overscrollEffect = rememberOverscrollEffect(),
                    ),
            ) {
                Text("Clear All")
            }
        },
    ) { contentPadding ->
        TransformingLazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            // Bottom spacing is derived from [ScreenScaffold.edgeButtonSpacing].
            contentPadding = contentPadding,
        ) {
            items(4) {
                Button(
                    onClick = {},
                    label = { Text("Item ${it + 1}") },
                    transformation = SurfaceTransformation(transformationSpec),
                    modifier =
                        Modifier.transformedHeight(this, transformationSpec)
                            .minimumVerticalContentPadding(
                                ButtonDefaults.minimumVerticalListContentPadding
                            )
                            .fillMaxWidth(),
                )
            }
        }
    }
}
```

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the button |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the button. When animating the button to appear/ disappear from the screen, a Modifier.height can be used to change the height of the component, but that won't change the space available for the content (though it may be scaled) |
| `buttonSize: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButtonSize = EdgeButtonSize.Small` | Defines the size of the button. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/EdgeButtonSize`. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | Controls the enabled state of the button. When `false`, this button will not be clickable |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonColors = ButtonDefaults.buttonColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonColors` that will be used to resolve the background and content color for this button in different states. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonDefaults#buttonColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | Optional `https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke` that will be used to resolve the border for this button in different states. |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if `null` is provided, interactions will still happen internally. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Slot for composable body content displayed on the Button. Either an Icon or Text. Note that when using an Icon it is recommended to remove any extra spacing the icon may have, either processing the image or using something like the list sample. |