Button group
@xngui/components/button-group@xngui/components/button-groupLayout wrapper for related action controls.
Preview
- TabMove between buttons
- Enter / SpaceActivate focused button
import { Component } from '@angular/core';
import { XActionSeparator } from '@xngui/components/action-separator';
import { XButton } from '@xngui/components/button';
import { XButtonGroup } from '@xngui/components/button-group';
import { XIcon } from '@xngui/icons';
@Component({
selector: 'app-example',
imports: [XActionSeparator, XButton, XButtonGroup, XIcon],
templateUrl: './button-group.component.html',
})
export class ExampleComponent {
protected onButtonClicked(label: string, event: { originalEvent: MouseEvent }): void {
const input = event.originalEvent.detail === 0 ? 'keyboard' : 'pointer';
// handle activation
}
}
Events
Interact with the preview — events will appear here.