ButtonGroup

@Composable
fun ButtonGroup(overflowIndicator: @Composable (ButtonGroupMenuState) -> Unit, modifier: Modifier = Modifier, @FloatRange(from = 0.0) expandedRatio: Float = ButtonGroupDefaults.ExpandedRatio, horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement, content: ButtonGroupScope.() -> Unit)

A layout composable that places its children in a horizontal sequence. When a child uses Modifier.animateWidth with a relevant MutableInteractionSource, this button group can listen to the interactions and expand the width of the pressed child element as well as compress the neighboring child elements. Additionally, items will overflow into a dropdown menu if there are too many items or the items are too wide to all fit onto the screen.

Parameters

overflowIndicator

composable that is displayed at the end of the button group if it needs to overflow. It receives a ButtonGroupMenuState.

modifier

the Modifier to be applied to the button group.

expandedRatio

the percentage, represented by a float, of the width of the interacted child element that will be used to expand the interacted child element as well as compress the neighboring children. By Default, standard button group will expand the interacted child element by ButtonGroupDefaults.ExpandedRatio of its width and this will be propagated to its neighbors. If 0f is passed into this slot, then the interacted child element will not expand at all and the neighboring elements will not compress. If 1f is passed into this slot, then the interacted child element will expand to 200% of its default width when pressed.

horizontalArrangement

The horizontal arrangement of the button group's children.

content

the content displayed in the button group, expected to use a composable that i s tagged with Modifier.animateWidth.

Samples

androidx.compose.material3.samples.ButtonGroupSampleandroidx.compose.material3.samples.SingleSelectConnectedButtonGroupSampleandroidx.compose.material3.samples.SingleSelectConnectedButtonGroupWithFlowLayoutSampleandroidx.compose.material3.samples.MultiSelectConnectedButtonGroupSampleandroidx.compose.material3.samples.MultiSelectConnectedButtonGroupWithFlowLayoutSampleandroidx.compose.material3.samples.VerticalButtonGroupSample
@Composable
fun ButtonGroup(modifier: Modifier = Modifier, @FloatRange(from = 0.0) expandedRatio: Float = ButtonGroupDefaults.ExpandedRatio, horizontalArrangement: Arrangement.Horizontal = ButtonGroupDefaults.HorizontalArrangement, content: @Composable ButtonGroupScope.() -> Unit)

Deprecated

Please use the overload with overflowIndicator parameter. This overload will create a composable that is cut off if there are too many items to fit on the screen neatly.

Replace with

ButtonGroup(overflowIndicator, modifier, expandedRatio, horizontalArrangement, content)

A layout composable that places its children in a horizontal sequence. When a child uses Modifier.animateWidth with a relevant MutableInteractionSource, this button group can listen to the interactions and expand the width of the pressed child element as well as compress the neighboring child elements.

Parameters

modifier

the Modifier to be applied to the button group.

expandedRatio

the percentage, represented by a float, of the width of the interacted child element that will be used to expand the interacted child element as well as compress the neighboring children. By Default, standard button group will expand the interacted child element by ButtonGroupDefaults.ExpandedRatio of its width and this will be propagated to its neighbors. If 0f is passed into this slot, then the interacted child element will not expand at all and the neighboring elements will not compress. If 1f is passed into this slot, then the interacted child element will expand to 200% of its default width when pressed.

horizontalArrangement

The horizontal arrangement of the button group's children.

content

the content displayed in the button group, expected to use a Material3 component or a composable that is tagged with Modifier.interactionSourceData.

Samples

androidx.compose.material3.samples.ButtonGroupSampleandroidx.compose.material3.samples.SingleSelectConnectedButtonGroupSampleandroidx.compose.material3.samples.SingleSelectConnectedButtonGroupWithFlowLayoutSampleandroidx.compose.material3.samples.MultiSelectConnectedButtonGroupSampleandroidx.compose.material3.samples.MultiSelectConnectedButtonGroupWithFlowLayoutSample