All Components

ButtonGroup Overview

The ButtonGroup is a container for two or more Button components. Each Button can be separately configured depending on your project requirements and according to the API of the Button.

Basic Usage

The following example demonstrates the ButtonGroup in action.

@Component({
    selector: 'my-app',
    template: `
        <kendo-button-group>
            <button kendoButton [togglable]="true">
                Option A
            </button>
            <button kendoButton [togglable]="true">
                Option B
            </button>
            <button kendoButton [togglable]="true">
                Option C
            </button>
        </kendo-button-group>
    `
})
class AppComponent {}

Configuration

Enable and Disable

By default, the ButtonGroup is enabled.

@Component({
    selector: 'my-app',
    template: `
        <kendo-button-group [disabled]="disabled">
            <button
                kendoButton
                [togglable]="true"
                [disabled]="disabled"
            >Option A</button>
            <button
                kendoButton
                [togglable]="true"
                [disabled]="disabled"
            >Option B</button>
        </kendo-button-group>
    `
})
class AppComponent {
    public disabled: boolean = true;
}

Use Selection Modes

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

@Component({
    selector: 'my-app',
    template: `
            <kendo-button-group [selection]="'single'">
                <button kendoButton [togglable]="true">
                    Option A
                </button>
                <button kendoButton [togglable]="true">
                    Option B
                </button>
                <button kendoButton [togglable]="true">
                    Option C
                </button>
            </kendo-button-group>
    `
})
class AppComponent {}

Accessibility

The ButtonGroup is WAI ARIA-accessible. The aria-disabled option defines the accessibility setting when the component is disabled.

In this article