The mobile Button widget navigates to mobile View or executes a custom callback when tapped.

Getting Started

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

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

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 using their respective root CSS classes.

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

<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 ships with several ready to use icons:

• about
• action
• add
• bookmarks
• camera
• cart
• compose
• contacts
• details
• downloads
• fastforward
• favorites
• featured
• toprated
• globe
• history
• home
• info
• more
• mostrecent
• mostviewed
• organize
• pause
• play
• recents
• refresh
• reply
• rewind
• search
• settings
• share
• stop
• trash

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.

Creating Custom Icons

In order to create colorizable icons like the default ones in Kendo UI Mobile, specify the icon image as a box mask (either as dataURI or as a separate image). The image should be PNG8 or PNG24 with alpha channel (PNG8+Alpha is supported by only few graphic editors, so better stick with PNG24). The image color is not important - it will be used as a mask only.

Note: BlackBerry 7.0 has a bug that renders its masks as background-image, so it is recommended to use white in order to support it. The bug is fixed in 7.1.

<style>
.km-custom {
  -webkit-mask-box-image: url("foo.png");
}
</style>

<div data-role="button">
  <a href="#index" data-icon="custom">Home</a>
</div>

BackButton

The mobile BackButton widget navigates to the previously visited mobile View when pressed. A view can be explicitly set using the href attribute.

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

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

DetailButton

The DetailButton widget navigates to a mobile View when pressed.

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

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