chrome:shell.skip

generated:catalog.entry.split-button.title

generated:catalog.entry.split-button.description

@xngui/components/split-button
@xngui/components/split-button

chrome:demo.section

chrome:demo.preview

demo-preview:hints.category.navigation:
Tab
demo-preview:hints.category.focus:
Focus
demo-preview:hints.category.shortcuts:
Enter / Space↓ / Enter
demo-preview:projection.slots-label:
[xStart] ng-content [xEnd] x-menu [xSplitTrigger]
import { Component } from '@angular/core';
import { XMenu } from '@xngui/components/menu';
import { XMenuItem } from '@xngui/components/menu-item';
import { XMenuSeparator } from '@xngui/components/menu-separator';
import { XSplitButton } from '@xngui/components/split-button';
import { XIcon } from '@xngui/icons';
 
@Component({
selector: 'app-example',
imports: [XMenu, XMenuItem, XMenuSeparator, XSplitButton, XIcon],
templateUrl: './split-button.component.html',
})
export class ExampleComponent {
protected onClicked(): void {
// primary action
}
protected onMenuClicked(event: { originalEvent: MouseEvent }): void {
// menu trigger
}
protected onOpened(): void {
// menu opened
}
protected onClosed(): void {
// menu closed
}
protected onFocused(): void {
// focus entered
}
protected onBlurred(): void {
// focus left
}
protected onItemSelected(label: string): void {
// menu item selected
}
}

chrome:demo.events.title

chrome:demo.events.empty

chrome:demo.api.title

x-split-button

chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
size
XSize
—
Visual size tier — falls back to XConfigService when unset.
density
XDensity
—
Spacing offsets — orthogonal to `size`; falls back to XConfigService when unset.
variant
XVariant
—
Color role for both triggers — falls back to XConfigService when unset.
appearance
XAppearance
—
Surface treatment for both triggers — falls back to XConfigService when unset.
type
XButtonType
'button'
Native `type` on the primary trigger.
disabled
boolean
—
Prevents interaction on both triggers.
loading
boolean
false
Shows spinner on the primary trigger and blocks interaction.
closeOnBackdrop
boolean
false
Dismiss projected `x-menu` on backdrop click — forwarded as `hasBackdrop` when opening.
ripple
boolean
—
Material-style press ripple — falls back to XConfigService when unset.
menuOpen
boolean
false
One-way `aria-expanded` hint when `[(open)]` is not bound. Prefer `open`; do not bind both.
ariaLabel
string
—
Accessible name for the `role="group"` host when the label is not obvious.
menuAriaLabel
string
—
Accessible name for the menu trigger — falls back to the `splitButton.menu` i18n key.