All Components

Appearance

The Button provides a predefined set of appearance options.

Apart from the [look]="'default'" default vision of the Button, these alternative styling options enable you to add a bare, flat, or outline look by setting the ButtonLook configuration without altering the dimensions of the Default Button.

Bare Button

The Bare Button is visually stripped down to the bare minimum for all interaction states and inherits its color properties—for example, background-color, color, and border-color—from its parent element. To render a Bare Button, use the [look]="'bare'" configuration.

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

Flat Button

The Flat Button removes the background and border only for its normal state, and inherits its color properties—for example, color—from its parent element. All other interactive states, such as :hover or :focus, inherit the states of the Default Button. To render a Flat Button, use the [look]="'flat'" configuration.

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

Outline Button

The Outline Button sets a transparent background and a solid border for its normal state and inherits all its color properties—for example, background-color, color, and border-color—from its parent element. To render an Outline Button, use the [look]="'outline'" configuration.

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