# `lr-button-group` - **Import** `import '@aceshooting/lyra-ui/components/lr-button-group.js';` (stable tag alias; registers the tag) - **Class** `LyraButtonGroup`, also available unregistered from `@aceshooting/lyra-ui/components/layout/button-group/button-group.class.js` - **Family** `components/layout/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 1 part, 1 custom property — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-button-group` Responsive semantic grouping primitive for related action controls. It preserves the slotted controls and exposes `role="group"` on its internal wrapper. **Properties:** - `orientation: LyraOrientation = 'horizontal'` (reflected; the shared `'horizontal' | 'vertical'` layout axis, with no component-local alias) - `label: string = ''` — accessible group-name fallback; a host `aria-label`, when present, wins including an explicitly empty value **Slots:** default action controls. **CSS parts:** `base` (the `role="group"` flex wrapper; wraps, and goes full-width below a 20rem container inline-size). **Themeable custom properties:** `--lr-button-group-gap` (default `var(--lr-space-2xs)`) — gap between slotted controls on both axes. **Sizing gotcha — give it an explicit width.** `:host` is `display: inline-flex` _and_ declares `container-type: inline-size` unconditionally (that is what makes the 20rem `@container` rule above fire at all). Inline-size containment means the box's own content can no longer contribute to its width, so in any context where the host would otherwise be shrink-to-fit — plain block flow, an `inline-flex`/`flex` parent, anywhere with no definite width — the group uses its `contain-intrinsic-inline-size` fallback of `var(--lr-size-12rem)` instead of growing to fit the slotted buttons. Give `` a definite width (`inline-size`, `width: 100%`, `flex: 1`, or a grid track) whenever it isn't already in a layout that supplies one. Under tighter allocation, `min-inline-size: var(--lr-icon-button-size)` remains the hard 2.5rem lower bound rather than the unallocated fallback. ---