generated:catalog.entry.toggle-button.title
generated:catalog.entry.toggle-button.description
@xngui/components/toggle-button@xngui/components/toggle-buttonchrome:demo.section
chrome:demo.preview
import { Component } from '@angular/core';
import { XToggleButton } from '@xngui/components/toggle-button';
import { XIcon } from '@xngui/icons';
@Component({
selector: 'app-example',
imports: [XToggleButton, XIcon],
templateUrl: './toggle-button.component.html',
})
export class ExampleComponent {
protected onChanged(event: XChangeEvent<boolean>): void {
// handle pressed change
}
protected onClicked(event: { originalEvent: MouseEvent }): void {
// handle click
}
protected onFocused(): void {
// handle focus
}
protected onBlurred(): void {
// handle blur
}
}
chrome:demo.events.title
chrome:demo.events.empty
chrome:demo.api.title
x-toggle-button
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
sizeXSize—Visual size tier — falls back to XConfigService or parent group when unset.
densityXDensity—Spacing offsets — orthogonal to `size`; falls back to XConfigService or group when unset.
variantXVariant—Color role — falls back to parent group or XConfigService when unset.
appearanceXAppearance—Surface treatment — falls back to parent group or XConfigService when unset.
typeXButtonType'button'Native button `type` attribute.
disabledboolean—Prevents interaction — cascades from parent group when unset locally.
loadingbooleanfalseShows spinner and blocks interaction — sets `aria-busy`.
rippleboolean—Material-style press ripple — falls back to XConfigService when unset; off when disabled or loading.
iconOnlybooleanfalseSquare icon-only layout; project the icon as default content.
ariaLabelstring—Accessible name — required when `iconOnly` is true.
groupValuestring—Value when composed inside XToggleGroup .