Compose Component

ButtonGroup

A ButtonGroup is a horizontal container for multiple Buttons, allowing them to scroll if they exceed the size of the viewport.

ButtonGroupSample

@Sampled
@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") }
    }
}

ButtonGroupControlCurrentItemSample

@Sampled
@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")
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: