DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Button Group

Button Group

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

  • Bind ButtonGroup to data.

  • Enable or disable multiple selection.

  • Customize the ButtonGroup appearance.

Bind ButtonGroup to Data

Use the items array to populate 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 ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with ButtonGroup.

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo