All Components

ButtonGroup Overview

The ButtonGroup is a container for 2 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: `
      <div class="row">
        <div class="col-xs-12 col-sm-6 example-col">
          <p>Text only</p>
          <kendo-buttongroup>
            <button kendoButton [togglable]="true">
              Bold
            </button>
            <button kendoButton [togglable]="true">
              Italic
            </button>
            <button kendoButton [togglable]="true">
              Underline
            </button>
          </kendo-buttongroup>
        </div>
        <div class="col-xs-12 col-sm-6 example-col">
          <p>Icons only</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="col-xs-12 col-sm-6 example-col">
          <p>Text + Icons</p>
          <kendo-buttongroup>
              <button kendoButton [togglable]="true" [icon]="'bold'">Bold</button>
              <button kendoButton [togglable]="true" [icon]="'italic'">Italic</button>
              <button kendoButton [togglable]="true" [icon]="'underline'">Underline</button>
          </kendo-buttongroup>
        </div>
        <div class="col-xs-12 col-sm-6 example-col">
          <p>Buttons with responsive width</p>
          <kendo-buttongroup [width]="'400px'">
              <button kendoButton [togglable]="true" [icon]="'bold'">Bold</button>
              <button kendoButton [togglable]="true" [icon]="'italic'">Italic</button>
              <button kendoButton [togglable]="true" [icon]="'underline'">Underline</button>
          </kendo-buttongroup>
        </div>
      </div>
    `
})
class AppComponent {}

Features

The ButtonGroup delivers the following features:

In this article