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 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.
  • The Bare Button is now deprecated. To apply identical styling, use the Flat Button.

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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="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" toggleable="true"></button>
                    <button kendoButton icon="italic" toggleable="true"></button>
                    <button kendoButton icon="underline" toggleable="true"></button>
                </kendo-buttongroup>
            </p>
          </div>
        </div>
    `
})
class AppComponent {}
In this article