Learn more about Kendo UI here

In this post we will take a look on working with Kendo UI Mobile buttons and how can we change their icons and styles.

You can create Kendo UI mobile buttons as below,

<a href="#add" data-role="button">Add</a>
 <a href="#home" data-role="button">Home</a>

To create Kendo UI Mobile Button you need to follow following steps,

• Create anchor tag
• Set data-role as button
• Set href as id of the view you want to navigate on click of the button

If you want to call a JavaScript function and execute some code on click of button then you need to set data-click as name of the JavaScript function.

<a data-role="button" data-click="AddFunction">Add</a>
<a href="#home" data-role="button">Home</a>

As you see in above example on click of button Add , JavaScript function AddFunction will be called. Whereas on click of Home button user will be navigated to mobile View with id home.

By default you get buttons rendered as below,

You can put style of buttons as well. For example you can set background colour as below,

<a data-role="button" data-click="AddFunction" style="background-color: green">Add</a>
 <a href="#home" data-role="button" style="background-color: red">Home</a>

You will get buttons rendered on mobile view as below,

There could be scenario in which you need to render different colours of buttons for android and iOS. Let us say you want blue colour for Android and red for iOS. You can do that by setting button styles in CSS as below,

.km-ios .buttonscolor { background-color: green; }
 .km-android .buttonscolor { background-color: red; }

Above we are overriding default style of Kendo UI Mobile Buttons. And set CSS class of buttons as below,

<a data-role="button" data-click="AddFunction" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" class="buttonscolor">Home</a>

You will get buttons rendered on mobile view as below,

You can set icons of buttons as well. Icons can be set by setting data-icon property.

<a data-role="button" data-click="AddFunction" data-icon="add" class="buttonscolor">Add</a>
 <a href="#home" data-role="button" data-icon="home" class="buttonscolor">Home</a>

As you see we set data-icon attribute to add and home respectively. You will get buttons rendered on mobile view as below,

You see there are icons rendered on button now. Kendo UI provides you set of icons out of box to use.

You can use any of above shown icon by setting data-icon attribute. If you want you can create custom icons and set as button icon as well.

Apart from above icons Kendo UI provides you other set of icons as well. You can use them with their Unicode.

Learn more about Fonts here

So let us say you want to use telephone icon as icon of button then you can use that using the Unicode.

.km-upload:after,
 .km-upload:before
 {
 content: "\e009";
 }

And then you can use upload as value of data-icon attribute of button as given below,

<a data-role="button" data-click="AddFunction" data-icon="upload" >Add</a>
 <a href="#home" data-role="button" data-icon="upload">Home</a>

You will get buttons rendered on mobile view as below,

In this way you can take use of Kendo UI Mobile Buttons in your application. I hope you find this poste useful. Thanks for reading.

Learn more about Kendo UI here