All Components

Styling

The ButtonGroup enables you to modify the appearance of its individual buttons or the whole group of buttons at once by providing alternative styling options through the ButtonLook configuration.

The ButtonLook options enable you to render:

Bare

The following example demonstrates how to reduce visual clutter by creating a bare button group. While keeping the whitespace around the text consistent with the regular buttons, [look]="'bare'" removes the background and border of the child buttons. Bare buttons can also be used as interactive icons.

@Component({
    selector: 'my-app',
    template: `
        <kendo-buttongroup [look]="'bare'">
            <button kendoButton>Button 1</button> |
            <button kendoButton>Button 2</button>
        </kendo-buttongroup>
    `
})
class AppComponent {}

Flat

The following example demonstrates how to set a group of flat buttons.

@Component({
    selector: 'my-app',
    template: `
        <kendo-buttongroup [look]="'flat'">
            <button kendoButton>Button 1</button> |
            <button kendoButton>Button 2</button>
        </kendo-buttongroup>
    `
})
class AppComponent {}

Outline

The following example demonstrates how to set a group of outline buttons.

@Component({
    selector: 'my-app',
    template: `
        <kendo-buttongroup [look]="'outline'">
            <button kendoButton>Button 1</button> |
            <button kendoButton>Button 2</button>
        </kendo-buttongroup>
    `
})
class AppComponent {}
In this article