# 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/xr/glimmer/ButtonGroup.composable#ButtonGroup(androidx.compose.ui.Modifier,androidx.xr.glimmer.ButtonGroupState,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)( modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonGroupState, horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal, verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` A ButtonGroup is a horizontal container for multiple `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`s, allowing them to scroll if they exceed the size of the viewport. |

## Functions

### ButtonGroup

Artifact: [androidx.xr.glimmer:glimmer](https://developer.android.com/jetpack/androidx/releases/xr-glimmer) [View Source](https://cs.android.com/search?q=file:androidx/xr/glimmer/ButtonGroup.kt+function:ButtonGroup) Added in [1.0.0-alpha22](https://developer.android.com/jetpack/androidx/releases/xr-glimmer#1.0.0-alpha22)

```
@Composable
fun ButtonGroup(
    modifier: Modifier = Modifier,
    state: ButtonGroupState = rememberButtonGroupState(),
    horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement,
    verticalAlignment: Alignment.Vertical = ButtonGroupDefaults.VerticalAlignment,
    contentPadding: PaddingValues = ButtonGroupDefaults.ContentPadding,
    content: @Composable () -> Unit
): Unit
```

A ButtonGroup is a horizontal container for multiple `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/Button.composable#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.xr.glimmer.ButtonSize,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)`s, allowing them to scroll if they exceed the size of the viewport. It is recommended that this container is used for groups of approximately 3-7 related buttons.

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonGroup
import androidx.xr.glimmer.Text

ButtonGroup(modifier = Modifier.fillMaxWidth()) {
    Button(onClick = {}) { Text("Button 1") }
    Button(onClick = {}) { Text("Button 2") }
    Button(onClick = {}) { Text("Button 3") }
    Button(onClick = {}) { Text("Button 4") }
    Button(onClick = {}) { Text("Button 5") }
}
```

As the user scrolls, the `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/package-summary#ButtonGroup(androidx.compose.ui.Modifier,androidx.xr.glimmer.ButtonGroupState,androidx.compose.foundation.layout.Arrangement.Horizontal,androidx.compose.ui.Alignment.Vertical,androidx.compose.foundation.layout.PaddingValues,kotlin.Function0)` will keep track of the "current item" via `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonGroupState#currentItemIndex()`. If this container is currently focused, then it will continuously attempt to gain focus on the current item.

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonGroup
import androidx.xr.glimmer.Text
import androidx.xr.glimmer.rememberButtonGroupState

val scope = rememberCoroutineScope()
val state = rememberButtonGroupState()
ButtonGroup(modifier = Modifier.fillMaxWidth(), state = state) {
    Button(onClick = { scope.launch { state.animateScrollToItem(1) } }) {
        Text("Select last item")
    }
    Button(onClick = { scope.launch { state.animateScrollToItem(0) } }) {
        Text("Select first item")
    }
}
```

| Parameters |
|---|---|
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | The modifier to be applied to the ButtonGroup |
| `state: https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonGroupState = rememberButtonGroupState()` | The `https://developer.android.com/reference/kotlin/androidx/xr/glimmer/ButtonGroupState` of this ButtonGroup |
| `horizontalArrangement: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement` | The horizontal arrangement of the ButtonGroup's children |
| `verticalAlignment: https://developer.android.com/reference/kotlin/androidx/compose/ui/Alignment.Vertical = ButtonGroupDefaults.VerticalAlignment` | The vertical alignment of the ButtonGroup's children |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = ButtonGroupDefaults.ContentPadding` | The spacing values to apply internally between the container and content |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The content of the ButtonGroup |