All Components

Appearance

The Button provides a predefined set of appearance options.

Apart from the default design of the Button, these alternative styling options enable you to add a flat or an outline look by setting the ButtonLook configuration without altering the dimensions of the Default Button.

The Bare Button is now deprecated. To apply identical styling, use the Flat Button.

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>Flat 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>Flat 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>Flat 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>Flat 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>Outline 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>Outline 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>Outline 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>Outline 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