All Components

ButtonGroup Overview

The ButtonGroup is a container for two or more Button components.

Each Button in the ButtonGroup can be separately configured depending on the requirements of your project and according to its API reference.

Basic Usage

The following example demonstrates the ButtonGroup in action.

@Component({
    selector: 'my-app',
    template: `
      <div class="row">
        <div class="col-sm-12 col-md-4 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-sm-12 col-md-4 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-sm-12 col-md-4 example-col">
          <p>Icons + Text</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>
      <div class="row">
        <div class="col-sm-12 example-col">
          <p>Buttons with responsive width</p>
          <kendo-buttongroup [width]="'100%'">
              <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 and Functionalities

In this article