generated:catalog.entry.button-group.title
generated:catalog.entry.button-group.description
@xngui/components/button-group@xngui/components/button-groupchrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { XActionSeparator } from '@xngui/components/action-separator';
import { XButton, XButtonLink } from '@xngui/components/button';
import { XButtonGroup } from '@xngui/components/button-group';
import { XKbd } from '@xngui/components/kbd';
import { XIcon } from '@xngui/icons';
@Component({
selector: 'app-example',
imports: [XActionSeparator, XButton, XButtonLink, XButtonGroup, XKbd, 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
}
protected onLinkClicked(label: string, event: MouseEvent): void {
event.preventDefault();
const input = event.detail === 0 ? 'keyboard' : 'pointer';
// handle link activation
}
}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-button-group
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
orientationXOrientation'horizontal'Join axis for child buttons.
sizeXSize—Visual size tier — cascades to child buttons when unset locally.
densityXDensity—Spacing offsets — cascades to child buttons when unset locally.
variantXVariant—Color role — cascades to child buttons; falls back to XConfigService when unset.
appearanceXAppearance—Surface treatment — cascades to child buttons; falls back to XConfigService when unset.
disabledboolean—Prevents interaction — cascades to child buttons when unset locally.
stretchbooleanfalseWhen true, segments share the group size evenly.
ariaLabelstring—Accessible name — required when the grouped purpose is not visible.