ButtonGroup

Composable Component

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).

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

Parameters

modifierModifier to be applied to the button group
spacingthe amount of spacing between buttons
expansionWidthhow much buttons grow when pressed
contentPaddingThe spacing values to apply internally between the container and the content
verticalAlignmentthe vertical alignment of the button group's children.
contentthe 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 ButtonGroupScope, to provide access to 3 new modifiers to configure the buttons.

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled

Button Card