JavaScript/jQuery Button Group

JavaScript ButtonGroup displays a set of two-state buttons and allows users to select one or multiple buttons. This demo illustrates how to configure the JavaScript ButtonGroup in the following steps:

Bind JavaScript ButtonGroup to data.
Enable or disable multiple selection.
Customize the JavaScript ButtonGroup appearance.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the ButtonGroup features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#single-selection').dxButtonGroup({ items: alignments, keyExpr: 'alignment', stylingMode: 'outlined', selectedItemKeys: ['left'], onItemClick(e) { DevExpress.ui.notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000); }, }); $('#multiple-selection').dxButtonGroup({ items: fontStyles, keyExpr: 'style', stylingMode: 'outlined', selectionMode: 'multiple', onItemClick(e) { DevExpress.ui.notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000); }, }); $('#single-selection-styling-mode').dxButtonGroup({ items: alignments, keyExpr: 'alignment', stylingMode: 'text', selectedItemKeys: ['left'], onItemClick(e) { DevExpress.ui.notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000); }, }); $('#multiple-selection-styling-mode').dxButtonGroup({ items: fontStyles, keyExpr: 'style', stylingMode: 'text', selectionMode: 'multiple', onItemClick(e) { DevExpress.ui.notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.6/css/dx.light.css" /> <script src="js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="buttongroups-container"> <div id="single-selection"></div> <div id="multiple-selection"></div> </div> <div class="buttongroups-container"> <div id="single-selection-styling-mode"></div> <div id="multiple-selection-styling-mode"></div> </div> </div> </body> </html>

.buttongroups-container { display: flex; justify-content: center; font-size: 16px; } .buttongroups-container > div { padding: 0 12px; } .buttongroups-container:first-child { margin-top: 120px; margin-bottom: 40px; } #multiple-selection-styling-mode { border-left-width: 1px; border-left-style: solid; border-color: #ddd; }

const alignments = [ { icon: 'alignleft', alignment: 'left', hint: 'Align left', }, { icon: 'aligncenter', alignment: 'center', hint: 'Center', }, { icon: 'alignright', alignment: 'right', hint: 'Align right', }, { icon: 'alignjustify', alignment: 'justify', hint: 'Justify', }, ]; const fontStyles = [ { icon: 'bold', style: 'bold', hint: 'Bold', }, { icon: 'italic', style: 'italic', hint: 'Italic', }, { icon: 'underline', style: 'underline', hint: 'Underlined', }, { icon: 'strike', style: 'strike', hint: 'Strikethrough', }, ];

Bind JavaScript ButtonGroup to Data

Use the items array to populate JavaScript ButtonGroup with data. You can specify the following fields in data objects:

Process Button Selection

Set the keyExpr property to the data field that supplies keys used to distinguish the selected buttons. In this demo, the selectedItemKeys property contains the keys of the selected buttons. This property allows you to predefine selected buttons. To enable multiple selection, set the selectionMode property to multiple.

Use the onItemClick function to process clicks on buttons.

Customize the Buttongroup Appearance

Specify the stylingMode property and select one of the three predefined styles. In this demo, the button groups in the first row have the outlined style, while others have the text style. You can specify the buttonTemplate property to customize the apperance of each button.

To get started with the DevExtreme JavaScript ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with JavaScript ButtonGroup.