Button groups

Change the props and copy the result. The content picker cycles the four content forms at any size; the other controls are real group props.

Two components from one module: the group owns the selection and the size, and every child item is a toggle button keyed by its id.

The 3 sizes, read from the kit’s exported style object. Each one shares its vertical padding and text recipe with the same-named Button size, so a group and a button of the same size sit flush in one row.

The 4 content forms the item supports, each at all 3 sizes, mirroring the Figma component’s Icon axis. Text is the default, for short self-explanatory labels. A leading icon earns its place when the glyph disambiguates similar options at a glance. Icon-only is the densest form, for toolbars whose glyphs are universally understood, and every such item needs an aria-label. The dot marks options that carry a live status, like environments, and is decorative: the label or nearby text must carry the status too.

Selection is single by default: one item at a time, announced as a radio group. Passing selectionMode lets items toggle independently, and disallowEmptySelection keeps at least one item selected. All three groups below are live.

Every state below is on the middle item of a real group, except the last, which disables the whole group. Hover and focus re-apply the kit’s own state classes with the variant prefix stripped, so what renders is what the kit ships rather than a repainted approximation.