All Components

Selection Mode

You can restrict the number of Buttons that can be selected in a ButtonGroup.

By default, the selection mode of the ButtonGroup is set to multiple.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Single selection mode</p>
                <kendo-buttongroup [selection]="'single'">
                    <button kendoButton [togglable]="true" [icon]="'align-left'"></button>
                    <button kendoButton [togglable]="true" [icon]="'align-center'"></button>
                    <button kendoButton [togglable]="true" [icon]="'align-right'"></button>
                    <button kendoButton [togglable]="true" [icon]="'align-justify'"></button>
                </kendo-buttongroup>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Multiple selection mode</p>
                <kendo-buttongroup>
                    <button kendoButton [togglable]="true" [icon]="'bold'"></button>
                    <button kendoButton [togglable]="true" [icon]="'italic'"></button>
                    <button kendoButton [togglable]="true" [icon]="'underline'"></button>
                </kendo-buttongroup>
            </div>
        </div>
    `
})
class AppComponent {}
In this article