New to Kendo UI for Angular? Start a free 30-day trial

ButtonGroupComponent

Represents the Kendo UI ButtonGroup component for Angular.

html

<kendo-buttongroup>
  <button kendoButton>Left</button>
  <button kendoButton>Middle</button>
  <button kendoButton>Right</button>
</kendo-buttongroup>

Selector

kendo-buttongroup

Export Name

Accessible in templates as #kendoButtonGroupInstance="kendoButtonGroup"

Inputs

Name	Type	Default	Description
disabled	`boolean`		To disable a specific button, set only its `disabled` property to `true`. If you also set the ButtonGroup `disabled` property, it takes precedence over the `disabled` properties of the underlying buttons and they are ignored.
navigable	`boolean`	`true`	When set to `true`, the component is a single tab-stop, and focus moves through the inner buttons using the arrow keys. When set to `false`, the inner buttons are part of the natural tab sequence of the page.
selection	`ButtonGroupSelection`	`'multiple'`	Sets the selection mode of the ButtonGroup.
tabIndex	`number`		Specifies the `tabIndex` of the component.
width	`string`		Sets the width of the ButtonGroup. When set, the buttons resize automatically to fill the full width of the group wrapper and acquire the same width.

Events

Name	Type	Description
navigate	`EventEmitter<PreventableEvent>`	Fires every time keyboard navigation occurs within the ButtonGroup.