Telerik blogs
Kendo UI Button Group

How can a button group help improve the user's journey and experience when navigating your site or app? Let's examine button groups and how they can be used.

In our last installment, you were introduced to the humble button. In this episode, you will learn about a friend of the button - button groups. A button group is two or more buttons that are part of a larger element. Their unity is their defining feature. Several buttons can be placed next to each other, but that does not mean they are a group. Like people standing in a crowd, there are certain features that reveal their association. The link may be a couple holding hands or school kids wearing the same uniform. Button groups are no different. Their appearance and behavior unify them just the same. This is important because among swaths of information users have to process, a button group makes it easier to see which elements and actions are related.

Default Button Group

There are many use cases for a button group. It could be a way to present a set of links. It could act as a controller or toolbar. It can even serve to conditionally hide and show content. Whatever the purpose, the main goal is to provide the user with a set of options to select from.

Imagine you are building an online store. Our first example will be a button group meant to filter the content on the page. This is the simplest way to create a button group with Kendo UI:

Kendo UI Button Groups

<!DOCTYPE html>
<html>
<head>
  <title>Kendo UI Example</title>
  <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
  <link rel="stylesheet" type="text/css" href="http://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="http://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
  <ul id="filter">
    <li>Shoes</li>
    <li>Tops</li>
    <li>Bottoms</li>
  </ul>
  <script>
    $(document).ready(function() {
      $('#filter').kendoButtonGroup();
    });
  </script>
</body>
</html>

Multiple Selection Button Group

By default, you can only select one button at a time. Since you are creating a button group to act as a filter, it would be useful if users could select multiple buttons. To do this, you set the selection option of the kendoButtonGroup method. This is the updated code:

Kendo UI Button Groups

$('#filter').kendoButtonGroup({
  selection: 'multiple'
});

Single Selection Button Group

Online stores also have controls for sorting information. Sorting is a good use case for a button group that only allows single selection. Button groups that act as navigation links are also good candidates for single selection. Here is an example of a button group that has the first item pre-selected. The index option is used to select the button.

Kendo UI Button Groups

This is the code for the button group:

<!DOCTYPE html>
<html>
<head>
  <-- load script and styles -->
</head>
<body>
  <ul id="sort">
    <li data-icon="sort-asc-sm">Price</li>
    <li data-icon="sort-desc-sm">Price</li>
  </ul>
  <script>
    $(document).ready(function() {
      $('#sort').kendoButtonGroup({
        index: 0
      });
    });
  </script>
</body>
</html>

Pagination Button Group

Another use for our button group is pagination links. But these buttons are no good to us if they don’t do anything. We can add an event handler to our buttons by specifying the select option. In this example, the event handler displays the page number.

Kendo UI Button Groups

<!DOCTYPE html>
<html>
<head>
  <-- load script and styles -->
</head>
<body>
  <h2>Welcome</h2>
  <ul id="pagination">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    function getPage(){
      const index = this.current().index() + 1;
      $('h2').text('Page ' + index);
    }
    $(document).ready(function() {
      $('#pagination').kendoButtonGroup({
        index: 1,
        select: getPage
      });
    });
  </script>
</body>
</html>

Conclusion

Many of the things you can do with a button group can be achieved with other elements. For example, a select group lets you choose one or multiple options from a list. While the functionality is similar to a button group, what sets a button group apart is its appearance. There is nothing that says 'click me' like a button can. You can customize the style of HTML elements to look the same, but that is not necessary when using a theme. And if you are using a Kendo UI theme, all of your components will look like a unified whole. All that is left to decide is how you will put your buttons to use. Will it be in a media player? A checkout form? Or an online editor? Would you like to learn more about these?

Stay with us as we keep diving into more Kendo UI components - be sure to check out our post on Menus.

Want to Try Kendo UI?

Want to start taking advantage of the Kendo UI button group, or any of the other 70+ ready-made Kendo UI components, like Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and Vue versions

Looking for UI component to support specific frameworks? Check out the ButtonGroup For Angular, the ButtonGroup for React, or the ButtonGroup for Vue.

Resources


Alberta Williams
About the Author

Alberta Williams

Alberta is a software developer and writer from New Orleans. Learn more about Alberta at github.com/albertaw.

Related Posts

Comments

Comments are disabled in preview mode.