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:
<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">
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:
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:
<-- load script and styles -->
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.
<-- load script and styles -->
const index = this.current().index() + 1;
$('h2').text('Page ' + index);
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.