Button group
Button groups (COMPONENT_SPEC §3, Compose ButtonGroup and ButtonGroupDefaults). In a standard group a pressed button grows by ExpandedRatio (15 %) and its neighbors give up the same width, so the group keeps its size; the width moves on the fast spatial spring and keeps its velocity when a press is interrupted. A connected group is a segmented row (it replaces the segmented button): 2dp apart, round outer corners, small inner corners that tighten when pressed and turn round when selected. Selection can be single (radiogroup), multiple (aria-pressed) or none. Trailing items of a standard group can collapse into an overflow menu.
Standard (static, CSS only)
Spacing per size: 18 / 12 / 8 / 8 / 8 dp (XS–XL, m3.material.io token DB; Compose uses the small value for every size). Without JavaScript the press morphs the shape only.
Connected (static, CSS only)
Inner corners per size: 8 / 8 / 8 / 16 / 20 dp, pressed 4 / 4 / 4 / 12 / 16 dp, selected round. Square groups keep the inner corner size on the outside too. Connected groups span their container with equal-width buttons.
Custom element
<m3e-button-group variant size shape button-variant selection-mode overflow label> with <m3e-button-group-item value icon selected disabled label> children. Events: change on the group ({ value, selected, values }) and action on the item ({ value }). Arrow keys, Home and End move focus.
React
<ButtonGroup variant size shape buttonVariant selectionMode selectedKeys onSelectionChange onAction overflow> with <ButtonGroupItem id icon variant isDisabled onPress> children. The buttons are React Aria (useButton, or useToggleButtonGroupItem when selectable); the motion, roving focus and overflow measurement are the same code the element runs.