The Button widget navigates between mobile Application views when pressed.

Getting Started

The Kendo mobile Application will automatically initialize a mobile Button for every element with role data attribute set to button present in the views/layouts' markup. Alternatively, it can be initialized using a jQuery selector. The button element may be either A or BUTTON.

Initialize Kendo mobile Button based on role data attribute

<a href="#foo" data-role="button">Foo</a>

Initialize Kendo mobile Button using a jQuery selector

var button = $("#button").kendoMobileButton();

Customizing Mobile Button Appearance

The Kendo mobile Button color can be customized by setting its background-color CSS property inline or by using a CSS selector with specificity of 20+. You can target platforms separately with their respective root CSS classes.

Green Button

<a href="#foo" data-role="button" style="background-color: green">Foo</a>

Green Kendo mobile Button in iOS and a red one in Android

<style>
    .km-ios .checkout { background-color: green; }
    .km-android .checkout { background-color: red; }
</style>

<a href="#foo" data-role="button" class="checkout">Foo</a>

Button icons

A Button icon can be set in two ways - either by adding an img element inside the Button element, or by setting an icon data attribute to the Button element.

KendoUI Mobile comes out of the box with several ready to use icons:

Additional icons may be added by defining the respective CSS class. If the icon data attribute is set to custom, the tab will receive km-custom CSS class.

Define custom button icon

<style>
.km-custom {
  background-image: url("foo.jpg");
}
</style>

<div data-role="button">
  <a href="#index" data-icon="custom">Home</a>
</div>
The BackButton widget navigates to the previous mobile View when pressed.

Initialize Kendo mobile BackButton based on role data attribute

<a data-role="backbutton">Foo</a>

Initialize Kendo mobile BackButton using a jQuery selector

var button = $("#button").kendoMobileBackButton();
The DetailButton widget navigates to a mobile View when pressed.

Initialize Kendo mobile DetailButton based on role data attribute

<a data-role="detail-button">Foo</a>

Initialize Kendo mobile DetailButton using a jQuery selector

var button = $("#button").kendoMobileDetailButton();