StellarUI

<stellar-button-group>

Structural button-group wrapper that merges adjacent button edges and exposes a labeled group contract.

Properties

Preview

Save

Preview

Markup

Copy

<stellar-button-group>
  <stellar-button>Save</stellar-button>
  <stellar-button appearance="outline">Preview</stellar-button>
  <stellar-button appearance="soft">Share</stellar-button>
</stellar-button-group>

API

Complete props, events, slots, and implementation notes for the shipped button-group wrapper.

Props

Prop	Type	Default	Notes
`label`	`string`	`''`	Accessible name for the joined control group.
`description`	`string`	`''`	Optional accessible description announced with the group.
`orientation`	`horizontal \| vertical`	`horizontal`	Controls whether joined children stack in a row or a column.

Events

Event	Source	Notes
custom events	none	`stellar-button-group` is purely structural and emits no events.

Slots

Slot	Notes
default	Direct child controls that should visually merge. Current shipped support covers components that consume the `--join-*` radius vars, including button, input, select, and number-input.

Notes

The public tag is `stellar-button-group`; `stellar-join` remains as a compatibility alias, not the primary contract.
It keeps the join-style border merging behavior: orientation plus shared `--join-*` radius variables and a 1px overlap between siblings.
`label` and `description` give the wrapper the accessible group contract the component exposes for button groups.
The wrapper itself does not invent a separate item tag. Direct child buttons are treated as the grouped items.
Grouped behavior only applies to shipped controls that consume the shared join radius variables. This port wires that into button, input, select, and number-input.
Focus stays visually above neighboring joined items by raising the focused child in stacking order.