Button
Edit this docThe 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();
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>
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
delete
details
downloads
fastforward
favorites
featured
globe
history
home
info
more
mostrecent
mostviewed
organize
pause
play
recents
refresh
reply
rewind
search
settings
share
sounds
stop
toprated
trash
volume
wifi
Additional icons may be added by defining the respective CSS class.
If the icon data attribute is set to custom, the button will receive km-custom CSS class.
Important: Check the Icons article for more information and how you can use custom icons in Kendo UI Mobile.