ButtonGroup

[axButtonGroup] is an attribute directive-component that visually joins a set of sibling buttons: it rounds the outer corners of the first/last children, sharpens the inner corners between siblings, and removes duplicate borders. It works with Button, IconButton, and Toggle children.

Import

import { AxButtonGroupComponent, AxButtonComponent } from '@axisui-ng/buttons';

Usage

<div axButtonGroup ariaLabel="Text alignment">
  <ax-button>Left</ax-button>
  <ax-button>Center</ax-button>
  <ax-button>Right</ax-button>
</div>

<!-- vertical -->
<div axButtonGroup orientation="vertical" ariaLabel="Sort">
  <ax-button>Asc</ax-button>
  <ax-button>Desc</ax-button>
</div>

Inputs

Input	Type	Default	Notes
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Layout direction.
`ariaLabel`	`string \| null`	`null`	Accessible label; required when the group has no visible heading.

Slots

Slot / marker	Notes
Default	Sibling children (`ax-button`, `ax-icon-button`, `ax-toggle`, etc.). The group only styles corners/borders; children keep their own variants.

Accessibility

Applies role="group" with the optional ariaLabel. For a toolbar of toggles with selection and roving tabindex, prefer ToggleGroup.

Storybook

Interactive examples live in Storybook under Buttons / ButtonGroup. Run pnpm storybook to explore them.