`. Common [buttons](/buttons.html.md) and [icon buttons](/icon-buttons.html.md) can be direct children. `Expressive.AutoInit()` keeps standard-group width stable while the pressed item grows; `data-selection` additionally enables managed toggle state. Bold Italic Underline ```

``` Use a plain group for commands. Add selection behavior only when pressing a button toggles an on/off state. Use a [segmented button](/segmented-buttons.html.md) when two to five choices form a compact form field whose value belongs in radios or checkboxes. ## Standard Standard is the default. Items keep separate shapes, and the gap closes as the size grows: 18dp at `xsmall`, 12dp at `small`, and 8dp from `medium` through `xlarge`. Pressing an item widens it by 15% of its measured width and morphs its corners toward the square shape for that size. The immediate neighbors provide the width, so the group's outer width stays fixed. ```

``` ## Connected Add `connected` to a selection group; do not use the connected treatment for one-shot actions. The group fills its container with equal items separated by 2dp. The outer ends remain round while the joins are squared off. The live M3 measurement keeps the `xsmall` join at 4dp; pressing `small` and `medium` changes their inner corners from 8dp to 4dp. The larger pairs are 16dp to 12dp at `large` and 20dp to 16dp at `xlarge`. ```

``` ## Selection A selection group contains toggle buttons. Add `data-selection="single"` when at most one item may be on, or `data-selection="multiple"` for independent toggles. Add `data-selection-required` when at least one must remain on. Give every item its initial `aria-pressed` value; `ButtonGroup` maintains it after `AutoInit()`. Bold Italic Underline ```

``` Selection changes color, shape, and icon fill, so color is not the only cue. Native buttons provide Enter and Space activation; all items remain in the Tab order. Keep visible labels when space allows. Give an unfamiliar icon-only item a tooltip as well as an `aria-label`. ## Sizes Put `xsmall`, `small` (the default), `medium`, `large`, or `xlarge` on the group. Common and icon buttons inherit the matching 32dp, 40dp, 56dp, 96dp, or 136dp geometry. An explicit size on a child still wins. The 32dp and 40dp visual sizes keep a minimum 48dp interaction target. One Two Three One Two Three One Two ```

``` ## Semantics A button group is not a composite widget. Do not use `role="toolbar"`, `radiogroup`, or a roving `tabindex`: items are reached with Tab. When the cluster needs a name, use `role="group"` with `aria-label` or `aria-labelledby`. This role adds no arrow-key contract. Action groups accept a direct `