All Components

Appearance

The ButtonGroup provides a predefined set of appearance options which allow you to modify of the whole group of buttons at once.

Apart from the default vision, these alternative styling options enable you to add Bare, Flat, or Outline Buttons by setting the ButtonLook configuration.

If you define an alternative styling option for the whole ButtonGroup, it will take precedence over any alternative styling option set to any of its individual Buttons.

Bare ButtonGroup

The following example demonstrates how to set a group of Bare Buttons.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare ButtonGroup</p>
            <p class="k-block">
                <kendo-buttongroup [look]="'bare'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare ButtonGroup in parent element with background color #787878 and text color #ffffff</p>
            <p class="k-block" style="background-color: #787878; color: #ffffff;">
                <kendo-buttongroup [look]="'bare'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare ButtonGroup in parent element with text color #0000ff</p>
            <p class="k-block" style="color: #0000ff;">
                <kendo-buttongroup [look]="'bare'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Bare ButtonGroup in parent element with text color #ff00ff</p>
            <p class="k-block" style="color: #ff00ff;">
                <kendo-buttongroup [look]="'bare'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}

Flat ButtonGroup

The following example demonstrates how to set a group of Flat Buttons.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat ButtonGroup</p>
            <p class="k-block">
                <kendo-buttongroup [look]="'flat'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat ButtonGroup in parent element with background color #787878 and text color #ffffff</p>
            <p class="k-block" style="background-color: #787878; color: #ffffff;">
                <kendo-buttongroup [look]="'flat'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat ButtonGroup in parent element with text color #0000ff</p>
            <p class="k-block" style="color: #0000ff;">
                <kendo-buttongroup [look]="'flat'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Flat ButtonGroup in parent element with text color #ff00ff</p>
            <p class="k-block" style="color: #ff00ff;">
                <kendo-buttongroup [look]="'flat'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}

Outline ButtonGroup

The following example demonstrates how to set a group of Outline Buttons.

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline ButtonGroup</p>
            <p class="k-block">
                <kendo-buttongroup [look]="'outline'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline ButtonGroup in parent element with background color #787878 and text color #ffffff</p>
            <p class="k-block" style="background-color: #787878; color: #ffffff;">
                <kendo-buttongroup [look]="'outline'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline ButtonGroup in parent element with text color #0000ff</p>
            <p class="k-block" style="color: #0000ff;">
                <kendo-buttongroup [look]="'outline'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
          <div class="col-xs-12 col-sm-6 example-col">
            <p>Outline ButtonGroup in parent element with text color #ff00ff</p>
            <p class="k-block" style="color: #ff00ff;">
                <kendo-buttongroup [look]="'outline'">
                    <button kendoButton [icon]="'bold'" [togglable]="true"></button>
                    <button kendoButton [icon]="'italic'" [togglable]="true"></button>
                    <button kendoButton [icon]="'underline'" [togglable]="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}
In this article