The Kendo mobile ButtonGroup widget is a linear set of grouped buttons.

Getting Started

The Kendo mobile Application will automatically initialize a mobile ButtonGroup for every element with role data attribute set to buttongroup present in the views/layouts markup.

Alternatively, it can be initialized using a jQuery selector. The ButtonGroup element may be UL element.

Initialize Kendo mobile ButtonGroup based on role data attribute.

<ul id="buttongroup" data-role="buttongroup" />
  <li>Option 1</li>
  <li>Option 2</li>
</ul>

Initialize Kendo mobile ButtonGroup using a jQuery selector

var buttongroup = $("#buttongroup").kendoMobileButtonGroup();

Customizing mobile ButtonGroup appearance

Every Kendo Mobile ButtonGroup color can be customized by setting its background-color inline or using a CSS selector.

Green Kendo mobile ButtonGroup

<ul id="buttongroup" data-role="buttongroup" />
  <li style="background-color: green">Option1</li>
  <li style="beckground-color: red">Option2</li>
</ul>

Button icons

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

Kendo 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 Button will receive km-custom CSS class.

Define custom button icon.

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

<ul id="buttongroup" data-role="buttongroup" />
  <li data-icon="custom">Option 1</li>
  <li>Option 2</li>
</ul>