Button Group for Angular

import { AuiButtonGroup } from '@absoluteui/angular/button-group';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Button Group page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { buttonGroup: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiButtonGroup } from '@absoluteui/angular/button-group';

@Component({
  selector: 'app-pager',
  imports: [AuiButtonGroup],
  template: `<aui-button-group label="Pagination" size="sm" [buttons]="buttons" (action)="go($event.value)"></aui-button-group>`,
})
export class PagerComponent {
  readonly buttons = [
    { icon: 'chevron-left', label: 'Previous page', value: 'prev' },
    { icon: 'chevron-right', label: 'Next page', value: 'next' },
  ];
  go(direction: string): void {
    void direction;
  }
}

<aui-button-group>

Class AuiButtonGroup; template reference #ref="auiButtonGroup".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the group (aria-label).
size	ButtonSize		Size of the Buttons the group creates or enhances; defaults to the Button configuration.
buttons	readonly ButtonGroupButton[]		create() only: Buttons to render. Icon-only buttons need a label.
orientation	ButtonGroupOrientation	'horizontal'	Layout direction.
attached	boolean	true	Shared borders and no inner radii; false spaces the buttons with a gap and lets horizontal groups wrap.

Outputs

Output	Payload	Description
(action)	ButtonGroupActionDetail	create() only: a button was activated. value defaults to the button index. Re-emits aui-action.