# ButtonGroup

## 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/ButtonGroup.composable#ButtonGroup(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.Alignment.Vertical,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, expansionWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonGroupScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Layout component to implement an expressive group of buttons in a row, that react to touch by growing the touched button, (while the neighbor(s) shrink to accommodate and keep the group width constant). |

## Functions

### ButtonGroup

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/ButtonGroup.kt+function:ButtonGroup)

```
@Composable
fun ButtonGroup(
    modifier: Modifier = Modifier,
    spacing: Dp = ButtonGroupDefaults.Spacing,
    expansionWidth: Dp = ButtonGroupDefaults.ExpansionWidth,
    contentPadding: PaddingValues = ButtonGroupDefaults.fullWidthPaddings(),
    verticalAlignment: Alignment.Vertical = Alignment.CenterVertically,
    transformation: SurfaceTransformation? = null,
    content: @Composable ButtonGroupScope.() -> Unit
): Unit
```

Layout component to implement an expressive group of buttons in a row, that react to touch by growing the touched button, (while the neighbor(s) shrink to accommodate and keep the group width constant).

Example of a `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonGroup.composable#ButtonGroup(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.Alignment.Vertical,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonGroup
import androidx.wear.compose.material3.Text

val interactionSource1 = remember { MutableInteractionSource() }
val interactionSource2 = remember { MutableInteractionSource() }

Box(contentAlignment = Alignment.Center) {
    ButtonGroup(Modifier.fillMaxWidth()) {
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource1),
            interactionSource = interactionSource1,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("L") }
        }
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource2),
            interactionSource = interactionSource2,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("R") }
        }
    }
}
```

Example of 3 buttons, the middle one bigger `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonGroup.composable#ButtonGroup(androidx.compose.ui.Modifier,androidx.compose.ui.unit.Dp,androidx.compose.ui.unit.Dp,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.Alignment.Vertical,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonGroup
import androidx.wear.compose.material3.Text

val interactionSource1 = remember { MutableInteractionSource() }
val interactionSource2 = remember { MutableInteractionSource() }
val interactionSource3 = remember { MutableInteractionSource() }

Box(contentAlignment = Alignment.Center) {
    ButtonGroup(Modifier.fillMaxWidth()) {
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource1),
            interactionSource = interactionSource1,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("A") }
        }
        Button(
            onClick = {},
            modifier = Modifier.weight(1.5f).animateWidth(interactionSource2),
            interactionSource = interactionSource2,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("B") }
        }
        Button(
            onClick = {},
            modifier = Modifier.animateWidth(interactionSource3),
            interactionSource = interactionSource3,
        ) {
            Box(Modifier.fillMaxWidth(), contentAlignment = Alignment.Center) { Text("C") }
        }
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the button group |
| `spacing: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ButtonGroupDefaults.Spacing` | the amount of spacing between buttons |
| `expansionWidth: https://developer.android.com/reference/kotlin/androidx/compose/ui/unit/Dp = ButtonGroupDefaults.ExpansionWidth` | how much buttons grow when pressed |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ButtonGroupDefaults.fullWidthPaddings()` | The spacing values to apply internally between the container and the content |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = Alignment.CenterVertically` | the vertical alignment of the button group's children. |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | The transformation for the ButtonGroup when it's inside a dynamically changing container. To prevent a "double transformation" (on both the group and its buttons), individual `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Button.composable#Button(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)`s inside this group must have their own container transformations disabled; only their content should be transformed. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonGroupScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | the content and properties of each button. The UX guidance is to use no more than 3 buttons within a ButtonGroup. Note that this content is on the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/ButtonGroupScope`, to provide access to 3 new modifiers to configure the buttons. |