Groups related nana-button elements into a single visual unit — joined together (the default) or evenly spaced. Optionally propagates a shared size and variant to every button so they stay consistent.
Left
Middle
Right
Show code Copy < nana-button-group > < nana-button >Left</ nana-button > < nana-button >Middle</ nana-button > < nana-button >Right</ nana-button > </ nana-button-group >
npm install @nana-tec/ui-components
import " @nana-tec/ui-components/button-group " ;
< nana-button > Left </ nana-button >
< nana-button > Middle </ nana-button >
< nana-button > Right </ nana-button >
Properties Property Attribute Type Default Description ariaLabelaria-labelstring | nullnullAccessible label for the group (maps to `aria-label`) orientation— ButtonGroupOrientation'horizontal'Lay the buttons out in a row or a column separated— booleanfalseSpace the buttons apart instead of joining them into one seamless unit size— Size | undefined—When set, applied to every slotted button so they share one size variant— Variant | undefined—When set, applied to every slotted button so they share one variant
Slots Slot Description (default)One or more `nana-button` elements
CSS parts Part Description ::part(base)The group container
CSS custom properties Property Description --nana-button-group-radiusCorner radius of the joined group
Slot Description (default)One or more nana-button elements
Variable Default Description --nana-button-group-radius— Corner radius of the joined group
Part Description baseThe group container
Keyboard accessible Screen-reader labels Focus-visible states ARIA roles and states WCAG 2.2 AA contrast Explore Button Group interactively Every state, prop, and edge case — with live controls — in Storybook.
