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:
<!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:
$('#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.
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.
<!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 tuned for next time when we will reveal the next component.