Components / Button Group

Button Group

Related native actions grouped with explicit orientation and an accessible name.

example.component.html

html

<aevko-button-group label="Text alignment">
  <button aevkoButton>
    Left
  </button>
  <button aevkoButton>
    Center
  </button>
</aevko-button-group>

Installation

npx aevko-ui@latest add button-group --yes

Source ownership

Customization

Arrange related actions horizontally or vertically while styling each projected native button independently.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`required`	Accessible name for the group of related actions.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Visual stacking direction for projected controls.
`content`	`projected native buttons`	`required`	Related actions; Button is installed transitively.

Accessibility contract

Accessibility

Included behavior

The host exposes a named group while every projected button keeps native keyboard behavior.

Your responsibility

Use one concise group label and only group actions that users understand as related.

Back to all components