---
title: "ButtonGroup"
description: "A ButtonGroup is a horizontal container for multiple Buttons, allowing them to scroll if they exceed the size of the viewport."
type: "component"
lastmod: "2026-07-30T07:35:59.168899Z"
---
## API Reference

### ButtonGroup

> Source set: Android

```kotlin
@Composable
public 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,
)
```

#### Parameters

| | |
| --- | --- |
| modifier | The modifier to be applied to the ButtonGroup |
| state | The [ButtonGroupState](/jetpack-compose/androidx.xr.glimmer/glimmer/interfaces/ButtonGroupState) of this ButtonGroup |
| horizontalArrangement | The horizontal arrangement of the ButtonGroup's children |
| verticalAlignment | The vertical alignment of the ButtonGroup's children |
| contentPadding | The spacing values to apply internally between the container and content |
| content | The content of the ButtonGroup |

## Code Examples
### ButtonGroupControlCurrentItemSample
```kotlin
@Composable
fun ButtonGroupControlCurrentItemSample() {
    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")
        }
    }
}
```
### ButtonGroupSample
```kotlin
@Composable
fun ButtonGroupSample() {
    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") }
    }
}
```